:leave animation in route child breaks route transition #56232
Description
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