Incorrect console warning about not animatable property: easing #48571
Description
Which @angular/* package(s) are the source of the bug?
animations
Is this a regression?
No
Description
When there is a sequenced animation, with animations having a different easing (for example the first animation having an ease-in, and the next animation having an ease-out), a console warning is given about 'easing' not being animatable.
Because easing is not animated, but rather is a property of the animation, the warning is incorrect.
Example animation:
animations: [
trigger('toolbarAnimations', [
state('void, leave', style({ transform: 'translateY(-100%)' })),
state('enter', style({ transform: 'none' })),
transition(':enter', [
sequence([
animate('200ms ease-in', style({ transform: 'none' })),
animate('200ms ease-out', style({ transform: 'translateY(-12px)' })),
animate('250ms ease-in', style({ transform: 'none' })),
]),
]),
transition(':leave', group([animate('300ms ease-in', style({ transform: 'translateY(-100%)' }))])),
])
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-7hjkrh?file=src/app/app.component.ts
Please provide the exception or error you saw
Warning: The animation trigger "toolbarAnimations" is attempting to animate the following not animatable properties: easing
(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.2.3
Node: 14.20.1
Package Manager: npm 6.14.17
OS: win32 x64
Angular: 14.2.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1402.3
@angular-devkit/build-angular 14.2.3
@angular-devkit/core 14.2.3
@angular-devkit/schematics 14.2.7
@angular-devkit/schematics-cli 14.1.2
@angular/cdk 14.2.2
@angular/material 14.2.2
@angular/material-moment-adapter 14.2.2
@schematics/angular 14.2.7
ng-packagr 14.3.0
rxjs 6.6.7
typescript 4.6.4
Anything else?
It is still reproducible in Angular 15.0, see stackblitz example