:enter animation doesn't animate opacity

[ilyakonrad]

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)' })))
      ])
    ])
  ])
]

[dario-piotrowicz]

@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]

@dario-piotrowicz Love the term "accidental refactoring", whatever that means 😆
Thanks for the quick response!

[dario-piotrowicz]

@dario-piotrowicz Love the term "accidental refactoring", whatever that means laughing Thanks for the quick response!

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! 😆

[angular-automatic-lock-bot]

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.}