skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Dario Piotrowicz
2022-12-23 14:51:18 +01:00
committed by Jessica Janiuk
parent 64430869fb
commit d36dfd4b62
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/animations/browser/src/dsl/animation_transition_factory.ts
+11 -1
View File
@@ -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);
packages/core/test/animation/animation_integration_spec.ts
+11 -1
View File
@@ -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();
});
});
});
})();