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

animations

Is this a regression?

No

Description

When animate.leave is used on elements in a @for loop, the animation does not always seem to be triggered, and seems to be dependent on the position of the rendered element in the loop.

The stackblitz link demonstrates the issue. There are three card elements, rendered in a loop from an array, or rendered as three separate elements. You can toggle which one is visible with the buttons.

They are each wrapped in an @if to control their visibility, with animate.enter and animate.leave on each.

The individual elements animate as expected, with each card fade transitioning into the next. On the loop, when going “up” the array, the leave animation does not appear to trigger, but when going “down” it does.

As far as I can see, the rendered HTML is the same for both scenarios, so I'm not sure if I have some fundamental understanding of how @for and @if behave together.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/kyent3r4-qaemnzzz?file=src%2Fstyles.css,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: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
    

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

Package                      Version
------------------------------------
@angular-devkit/architect    0.2002.0
@angular-devkit/core         20.2.0
@angular-devkit/schematics   20.2.0
@angular/build               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
zone.js                      0.15.1

Anything else?

No response