Which @angular/* package(s) are the source of the bug?
animations
Is this a regression?
Yes
Description
I have some components that should be rendered and destroyed with animation which changes transform, border radius and opacity properties, so I use :enter and :leave animations. It worked perfectly prior to upgrading to v14.
Now in v14 :leave animation is working as it did in v13, while :enter stopped animating opacity.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-ivy-5ktwcj
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.0.5
Node: 16.13.1
Package Manager: yarn 1.22.15
OS: win32 x64
Angular: 14.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1400.5
@angular-devkit/build-angular 14.0.5
@angular-devkit/core 14.0.5
@angular-devkit/schematics 14.0.5
@angular/cdk 14.0.4
@angular/fire 7.4.1
@angular/material 14.0.4
@angular/material-moment-adapter 14.0.4
@schematics/angular 14.0.5
rxjs 6.6.7
typescript 4.6.4
webpack 5.73.0
Anything else?
Here's how it worked in the version 13.3.11 https://stackblitz.com/edit/angular-ivy-dtsfmi.
Same code, same everything except the version of @angular/animations.
Also here's my animations setup:
animations: [
trigger('popupAnimation', [
transition(':enter', [
group([
query('.ns-popup-overlay', style({ opacity: 0 })),
query('.ns-popup', style({ transform: 'scale(0.95) translateY(-50px)', borderRadius: '24px' })),
query('.ns-popup-overlay', animate('0.3s ease-in-out', style({ opacity: 1 }))),
query(
'.ns-popup',
animate('0.3s ease-in-out', style({ transform: 'scale(1) translateY(0)', borderRadius: '6px' }))
)
])
]),
transition(':leave', [
group([
query('.ns-popup-overlay', style({ opacity: 1 })),
query('.ns-popup', style({ transform: 'scale(1) translateY(0)' })),
query('.ns-popup-overlay', animate('0.3s ease-in-out', style({ opacity: 0 }))),
query('.ns-popup', animate('0.3s ease-in-out', style({ transform: 'scale(0.9) translateY(0)' })))
])
])
])
]
Which @angular/* package(s) are the source of the bug?
animations
Is this a regression?
Yes
Description
I have some components that should be rendered and destroyed with animation which changes transform, border radius and opacity properties, so I use
:enterand:leaveanimations. It worked perfectly prior to upgrading to v14.Now in v14
:leaveanimation is working as it did in v13, while:enterstopped animating opacity.Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-ivy-5ktwcj
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run
ng version)Anything else?
Here's how it worked in the version 13.3.11 https://stackblitz.com/edit/angular-ivy-dtsfmi.
Same code, same everything except the version of @angular/animations.
Also here's my
animationssetup: