From d36dfd4b626ff4c5894ca67136f71dd1f7f56e3e Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario@cloudflare.com>
Date: Fri, 23 Dec 2022 14:51:18 +0100
Subject: [PATCH] fix(animations): fix non-animatable warnings for easing
 (#48583)

the easing "prop" used to specify the easing function to
apply to animations isn't a valid css property, it is thus
considered not animatable but different values for such
property shouldn't cause non-animatable warnings

resolves #48571

PR Close #48583
---
 .../browser/src/dsl/animation_transition_factory.ts  | 12 +++++++++++-
 .../test/animation/animation_integration_spec.ts     | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/animations/browser/src/dsl/animation_transition_factory.ts b/packages/animations/browser/src/dsl/animation_transition_factory.ts
index 7368d93dd3fb8..d66700da1b70b 100644
--- a/packages/animations/browser/src/dsl/animation_transition_factory.ts
+++ b/packages/animations/browser/src/dsl/animation_transition_factory.ts
@@ -123,12 +123,22 @@ function checkNonAnimatableInTimelines(
     return;
   }
 
+  const allowedNonAnimatableProps = new Set<string>([
+    // 'easing' is a utility/synthetic prop we use to represent
+    // easing functions, it represents a property of the animation
+    // which is not animatable but different values can be used
+    // in different steps
+    'easing'
+  ]);
+
   const invalidNonAnimatableProps = new Set<string>();
 
   timelines.forEach(({keyframes}) => {
     const nonAnimatablePropsInitialValues = new Map<string, string|number>();
     keyframes.forEach(keyframe => {
-      for (const [prop, value] of keyframe.entries()) {
+      const entriesToCheck =
+          Array.from(keyframe.entries()).filter(([prop]) => !allowedNonAnimatableProps.has(prop));
+      for (const [prop, value] of entriesToCheck) {
         if (!driver.validateAnimatableStyleProperty!(prop)) {
           if (nonAnimatablePropsInitialValues.has(prop) && !invalidNonAnimatableProps.has(prop)) {
             const propInitialValue = nonAnimatablePropsInitialValues.get(prop);
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index aba0ad4119a49..f13fddebf2e82 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {animate, animateChild, animation, AnimationEvent, AnimationMetadata, AnimationOptions, AUTO_STYLE, group, keyframes, query, state, style, transition, trigger, useAnimation, ɵPRE_STYLE as PRE_STYLE} from '@angular/animations';
+import {animate, animateChild, animation, AnimationEvent, AnimationMetadata, AnimationOptions, AUTO_STYLE, group, keyframes, query, sequence, state, style, transition, trigger, useAnimation, ɵPRE_STYLE as PRE_STYLE} from '@angular/animations';
 import {AnimationDriver, ɵAnimationEngine, ɵNoopAnimationDriver as NoopAnimationDriver} from '@angular/animations/browser';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
 import {ChangeDetectorRef, Component, HostBinding, HostListener, Inject, RendererFactory2, ViewChild} from '@angular/core';
@@ -4411,6 +4411,16 @@ describe('animation tests', function() {
          ]);
          expect(spyWarn).not.toHaveBeenCalled();
        });
+
+    it('should not show a warning if a different easing function is used in different steps',
+       () => {
+         const spyWarn = spyOn(console, 'warn');
+         buildAndAnimateSimpleTestComponent([sequence([
+           animate('1s ease-in', style({background: 'red'})),
+           animate('1s ease-out', style({background: 'green'})),
+         ])]);
+         expect(spyWarn).not.toHaveBeenCalled();
+       });
   });
 });
 })();