:leave animation in route child breaks route transition

[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