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

core

Is this a regression?

No

Description

Issue

When an element is destroyed while it's animating through animate.enter, animate.leave is then triggered without cancelling the enter animation. As a result, both enter and leave CSS classes are applied simultaneously, causing the animations to get stuck for several seconds.

Reproduction

In the provided StackBlitz project:

1. Click the "Toggle" button to trigger the enter animation
2. While the enter animation is running, click "Toggle" again

Expected Behavior

The enter animation should be cancelled as soon as the leave animation is triggered.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-bug-report-xzfbezd

Please provide the exception or error you saw

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

Angular CLI: 20.2.1
Node: 22.16.0
Package Manager: npm 11.5.2
OS: win32 x64


Angular: 20.2.2
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2002.1
@angular-devkit/core         20.2.1
@angular-devkit/schematics   20.2.1
@angular/build               20.2.1
@angular/cdk                 20.2.1
@angular/cli                 20.2.1
@schematics/angular          20.2.1
rxjs                         7.8.2
typescript                   5.9.2

Anything else?

No response