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

core, animations

Is this a regression?

No

Description

I wanted to migrate a simple dialog with a backdrop from @angular/animation to the new API. The requirements are:

1. Structure: backdrop > container > content
2. The container animation must be longer than the backdrop animation
3. I need to know when the animations (both enter and leave) have finished

1. animate.leave doesn't emit animationend

Referring to the comment (#62212 (reply in thread)), the preferred way to react to animation events is now through native browser events. Unfortunately, in the case of animate.leave, it seems that neither animationend nor animationcancel is emitted.

2. Nested animations

I want to add animations to the 'backdrop ' and 'container'. I've tested two ways to achieve my goal:

1. Nested attributes animate

<backdrop animate.enter="..." animate.leave="...">
    <container animate.enter="..." animate.leave="...">
        ...content
    </container>
</backdrop>

2. Nested styles with animation

<style>
    backdrop.enter { animation: ... }
    backdrop.enter > container { animation: ... }
    backdrop.leave { animation: ... }
    backdrop.leave > container { animation: ... }
</style>

<backdrop animate.enter="..." animate.leave="...">
    <container>
        ...content
    </container>
</backdrop>

In the first approach, animate.enter works correctly, but animate.leave for the container does not fire at all.
In the second attempt, the enter and leave animations for the container are interrupted.

To be honest, I'm not sure how this situation with nested animations should work, but I think the more natural approach is the first one, and the nested 'animate' should also be notified when the parent is destroyed. The question remains whether a nested animation should prevent its parent from being destroyed.

I am aware that I can achieve this with (animate) or a second approach with animations of equal duration.

3. Class-based animation termination

According to documentation (https://angular.dev/guide/animations#event-bindings-functions-and-third-party-libraries):

If you don't call animationComplete() when using animate.leave, Angular calls the function automatically after a four-second delay.

This information is incomplete, as animations based on CSS classes also terminate after 4 seconds. This can be misleading, as the documentation suggests that the timeout only serves as a safeguard against a missing call animationComplete().

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/kyent3r4?file=src%2Fmain.ts

Please provide the exception or error you saw

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

Angular CLI: 20.2.0
Node: 22.17.1
Package Manager: npm 10.9.2
OS: win32 x64


Angular: 20.2.1
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------
@angular-devkit/architect       0.2002.0
@angular-devkit/build-angular   20.2.0
@angular-devkit/core            20.2.0 (cli-only)
@angular-devkit/schematics      20.2.0
@angular/cdk                    20.2.0
@angular/cli                    20.2.0
@schematics/angular             20.2.0
rxjs                            7.8.2
typescript                      5.8.3

Anything else?

No response