fix(animations): fix non-animatable warnings for easing (#48583)

dario-piotrowicz · thePunderWoman · commit b4187548cae4 · 2023-01-26T22:03:07.000Z
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
diff --git 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
@@ -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();
+       });
   });
 });
 })();
