Repository navigation
: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
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)' })))
])
])
])
]
Activity
dario-piotrowicz commentedon Jul 17, 2022
@ilyakonrad good catch! the bug is indeed a regression caused by some accidental refactoring, a fix is on its way 🙂 🎉
Also thank you very much for all the information and the nice reproductions! they've been very helpful! 😄
ilyakonrad commentedon Jul 17, 2022
@dario-piotrowicz Love the term "accidental refactoring", whatever that means 😆
Thanks for the quick response!
dario-piotrowicz commentedon Jul 17, 2022
yeah sorry for the silly term 😆 , anyways I was trying to say that some refactoring broke it by mistake, I'm sure you got the gist of it! 😆
fix(animations): make sure falsy values are added to _globalTimelineS…
fix(animations): make sure falsy values are added to _globalTimelineS…
angular-automatic-lock-bot commentedon Aug 18, 2022
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.