animate.enter/leave inside a @for behave differently with bound functions, and when inside an embedded template (e.g. @if/switch/etc)

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

core

Is this a regression?

No

Description

In trying to migrate from @angular/animations, ran into some odd behavior. This isn't precisely the same issues as seen in the larger application, but it seems like animate.enter="foo" and [animate.enter]="() => 'foo'" have different results, and whether the animated element is inside an @if or not can drive whether the element leaves or not.

In the repro below, there's a "swap" and "remove" button.

blue = animate.enter, no inner template complexity green = animate.enter, with if red = [animate.enter], with if

(The old animation thing is what this does with comparable @angular/animations.)

Intuitively, I'd assume the three versions should behave the same way. However:

On load: blue/green slide out, red doesn't On remove: blue/green slide, red doesn't On swap: red does nothing, blue seems to enter, then leave, green is the opposite direction [EDIT: Once the animate callbacks were fixed to actually call the function, duh, the green/red behave the same way.]

If you click swap 3-4 times in very quick succession and then let the animation run, the green bar will lose one or both of the elements. Subsequent updates will trigger an exception (which you can see in the console) about the expected DOM element missing.

I'm new to animate.enter/leave, so not 100% sure what to expect. Perhaps this is all "fine". At the very least the element going missing seems like it wouldn't be.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-g33znevg?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       : 22.1.8
Angular           : 22.1.6
Node.js           : 22.22.3
Package Manager   : npm 10.8.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations       │ 22.1.6            │ ^22.0.0           │
│ @angular/build            │ 22.1.8            │ ^22.0.0           │
│ @angular/cli              │ 22.1.8            │ ^22.0.0           │
│ @angular/common           │ 22.1.6            │ ^22.0.0           │
│ @angular/compiler         │ 22.1.6            │ ^22.0.0           │
│ @angular/compiler-cli     │ 22.1.6            │ ^22.0.0           │
│ @angular/core             │ 22.1.6            │ ^22.0.0           │
│ @angular/forms            │ 22.1.6            │ ^22.0.0           │
│ @angular/platform-browser │ 22.1.6            │ ^22.0.0           │
│ @angular/router           │ 22.1.6            │ ^22.0.0           │
│ rxjs                      │ 7.8.2             │ ^7.8.1            │
│ typescript                │ 6.0.3             │ ~6.0.3            │
│ zone.js                   │ 0.16.3            │ 0.16.3            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response