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

core

Is this a regression?

No

Description

When using a composite animation with animate.leave, the shortest animation is performed, after which the element is removed from the tree. Therefore, the remaining transitions/animations are not executed, and the animation does not perform as expected.

In the example above, clicking the "click me" button should trigger the opening animation (animate.enter) without any issues. However, when using animate.leave, we'll see that only the first transitions are executed (without a delay), after which the block abruptly disappears.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-sjuhgdmu?file=src%2Fapp%2Fapp.component.html

Please provide the exception or error you saw

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

Angular CLI: 20.3.3
Node: 22.17.0
Package Manager: yarn 1.22.22
OS: win32 x64


Angular: 20.3.3
... animations, build, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.3
@angular-devkit/core         20.0.5
@angular-devkit/schematics   20.3.3
@angular/cdk                 20.2.7
@angular/material            20.2.7
@schematics/angular          20.3.3
rxjs                         7.8.1
typescript                   5.8.3
zone.js                      0.15.1

Anything else?

No response