:enter animation doesn't animate opacity #46833
Description
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
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)' })))
])
])
])
]