8000 :leave animation in route child breaks route transition · Issue #56232 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

:leave animation in route child breaks route transition #56232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Totati opened this issue Jun 3, 2024 · 1 comment
Open

:leave animation in route child breaks route transition #56232

Totati opened this issue Jun 3, 2024 · 1 comment
Labels
area: animations
Milestone
needsTriage

Comments

@Totati
Copy link
Contributor
Totati commented Jun 3, 2024 •
edited
Loading

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
@ngbot ngbot bot added this to the needsTriage milestone Jun 3, 2024
@kalves
Copy link
kalves commented May 15, 2025 •
edited
Loading

@Totati Hi ,
For those who might encounter this issue:
This seems to be the expected behavior (same issue with v19). But here is a workaround. Adding an invisible transition with an adapted duration prevent the void between components.

    group([
      query(':leave', [
        ...
      ], { optional: true }),
      query(':enter', [
        ...
      ], { optional: true }),
      query(':leave *', [
        style({}),
        animate(1.2, style({}))
      ], { optional: true })
    ])

An oldie but a goodie!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: animations
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
3 participants
@kalves @thePunderWoman @Totati
0