Content-Length: 272237 | pFad | http://github.com/angular/angular/issues/56232

5C :leave animation in route child breaks route transition · Issue #56232 · angular/angular · GitHub
Skip to content

:leave animation in route child breaks route transition #56232

Open
@Totati

Description

@Totati

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

No

Description

I'd like to have an :enter animation for the new route (the previous component should be instantly removed), but when I have an element with :leave animation in the previous component, it stays in place till the new route animates in.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-nldvyd

Reproduction:

The home route has a list rendered.
Navigating to the about page animates in the element below the home and then the home disappears.
The about route does not have a list rendered.
Navigating back to the home page removes the about page instantly and animates in the home page.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/cli                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions









      ApplySandwichStrip

      pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


      --- a PPN by Garber Painting Akron. With Image Size Reduction included!

      Fetched URL: http://github.com/angular/angular/issues/56232

      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy