fix(core): fixes regression in animate.leave function bindings (angular#64413)

thePunderWoman · AndrewKushnir · commit 0ed6c9396049 · 2025-10-14T13:46:38.000-07:00
When adding and removing items in a `@for` loop, the `animate.leave` event binding instruction was not updated to use the same logic as the class function when the animation queue was added. We were not returning the correct signature for the `animate.leave` function, which caused the animation to not trigger correctly. This updates the event binding instruction to use the same logic as the class function when adding the animation to the queue. fixes: angular#64336 PR Close angular#64413
diff --git a/packages/core/src/animation/utils.ts b/packages/core/src/animation/utils.ts
@@ -280,3 +280,15 @@ export function clearLViewNodeAnimationResolvers(lView: LView, tNode: TNode) {
   const nodeAnimations = getLViewLeaveAnimations(lView).get(tNode.index);
   if (nodeAnimations) nodeAnimations.resolvers = undefined;
 }
+
+export function leaveAnimationFunctionCleanup(
+  lView: LView,
+  tNode: TNode,
+  nativeElement: HTMLElement,
+  resolvers: VoidFunction[] | undefined,
+  cleanupFns: Function[],
+) {
+  clearLeavingNodes(tNode, nativeElement as HTMLElement);
+  cleanupAfterLeaveAnimations(resolvers, cleanupFns);
+  clearLViewNodeAnimationResolvers(lView, tNode);
+}
diff --git a/packages/core/src/render3/instructions/animation.ts b/packages/core/src/render3/instructions/animation.ts
@@ -41,6 +41,7 @@ import {
   getLViewEnterAnimations,
   getLViewLeaveAnimations,
   isLongestAnimation,
+  leaveAnimationFunctionCleanup,
   longestAnimations,
   noOpAnimationComplete,
   trackEnterClasses,
@@ -388,50 +389,81 @@ function runLeaveAnimationFunction(
   lView: LView,
   tNode: TNode,
   value: AnimationFunction,
-): Promise<void> {
+): {promise: Promise<void>; resolve: VoidFunction} {
   const {promise, resolve} = promiseWithResolvers<void>();
   const nativeElement = getNativeByTNode(tNode, lView) as Element;
 
   ngDevMode && assertElementNodes(nativeElement, 'animate.leave');
 
+  const cleanupFns: Function[] = [];
   const renderer = lView[RENDERER];
   const animationsDisabled = areAnimationsDisabled(lView);
   const ngZone = lView[INJECTOR]!.get(NgZone);
   const maxAnimationTimeout = lView[INJECTOR]!.get(MAX_ANIMATION_TIMEOUT);
 
+  (getLViewLeaveAnimations(lView).get(tNode.index)!.resolvers ??= []).push(resolve);
+  const resolvers = getLViewLeaveAnimations(lView).get(tNode.index)?.resolvers;
+
   if (animationsDisabled) {
-    resolve();
+    leaveAnimationFunctionCleanup(
+      lView,
+      tNode,
+      nativeElement as HTMLElement,
+      resolvers,
+      cleanupFns,
+    );
   } else {
-    const timeoutId = setTimeout(() => {
-      clearLeavingNodes(tNode, nativeElement as HTMLElement);
-      resolve();
-    }, maxAnimationTimeout);
+    const timeoutId = setTimeout(
+      () =>
+        leaveAnimationFunctionCleanup(
+          lView,
+          tNode,
+          nativeElement as HTMLElement,
+          resolvers,
+          cleanupFns,
+        ),
+      maxAnimationTimeout,
+    );
 
     const event: AnimationCallbackEvent = {
       target: nativeElement,
       animationComplete: () => {
-        clearLeavingNodes(tNode, nativeElement as HTMLElement);
+        leaveAnimationFunctionCleanup(
+          lView,
+          tNode,
+          nativeElement as HTMLElement,
+          resolvers,
+          cleanupFns,
+        );
         clearTimeout(timeoutId);
-        resolve();
       },
     };
     trackLeavingNodes(tNode, nativeElement as HTMLElement);
 
     ngZone.runOutsideAngular(() => {
-      renderer.listen(
-        nativeElement,
-        'animationend',
-        () => {
-          resolve();
-        },
-        {once: true},
+      cleanupFns.push(
+        renderer.listen(
+          nativeElement,
+          'animationend',
+          () => {
+            leaveAnimationFunctionCleanup(
+              lView,
+              tNode,
+              nativeElement as HTMLElement,
+              resolvers,
+              cleanupFns,
+            );
+            clearTimeout(timeoutId);
+          },
+          {once: true},
+        ),
       );
     });
     value.call(lView[CONTEXT], event);
   }
 
   // Ensure cleanup if the LView is destroyed before the animation runs.
-  return promise;
+  return {promise, resolve};
 }
 
 function queueEnterAnimations(lView: LView) {
diff --git a/packages/core/test/acceptance/animation_spec.ts b/packages/core/test/acceptance/animation_spec.ts
@@ -1641,6 +1641,179 @@ describe('Animation', () => {
       expect(fixture.debugElement.queryAll(By.css('p')).length).toBe(4);
     }));
 
+    it('should run leave and enter animations for `@for` loops when adding / removing simultaneously', fakeAsync(() => {
+      const animateStyles = `
+        .slide-in {
+          animation: slide-in 500ms;
+        }
+        .fade {
+          animation: fade-out 500ms;
+        }
+        @keyframes slide-in {
+          from {
+            transform: translateX(-10px);
+          }
+          to {
+            transform: translateX(0);
+          }
+        }
+        @keyframes fade-out {
+          from {
+            opacity: 1;
+          }
+          to {
+            opacity: 0;
+          }
+        }
+      `;
+
+      @Component({
+        selector: 'test-cmp',
+        styles: animateStyles,
+        template: `
+          <div>
+            @for (item of items(); track item) {
+              <p id="item-{{item}}" animate.enter="slide-in" animate.leave="fade">I should slide in {{item}}.</p>
+            }
+          </div>
+        `,
+        encapsulation: ViewEncapsulation.None,
+      })
+      class TestComponent {
+        items = signal([1, 2, 3]);
+
+        addremove() {
+          this.items.update((l) => l.slice(1).concat([l.at(-1)! + 1]));
+        }
+      }
+      TestBed.configureTestingModule({animationsEnabled: true});
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const cmp = fixture.componentInstance;
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+      const paragraphs = fixture.debugElement.queryAll(By.css('p'));
+      paragraphs.forEach((p) => {
+        p.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+        p.nativeElement.dispatchEvent(
+          new AnimationEvent('animationend', {animationName: 'slide-in'}),
+        );
+      });
+      cmp.addremove();
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+
+      const first = fixture.debugElement.query(By.css('p#item-1'));
+      const last = fixture.debugElement.query(By.css('p#item-4'));
+      first.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+      last.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+      expect(fixture.debugElement.queryAll(By.css('p.fade')).length).toBe(1);
+      expect(fixture.debugElement.queryAll(By.css('p.slide-in')).length).toBe(1);
+
+      last.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'slide-in'}),
+      );
+      first.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'fade-out'}),
+      );
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+      tick();
+
+      expect(fixture.debugElement.queryAll(By.css('p')).length).toBe(3);
+      expect(fixture.debugElement.queryAll(By.css('p.slide-in')).length).toBe(0);
+      expect(fixture.debugElement.queryAll(By.css('p.fade')).length).toBe(0);
+    }));
+
+    it('should run leave and enter animations for `@for` loops when adding / removing simultaneously with leave function', fakeAsync(() => {
+      const animateStyles = `
+        .slide-in {
+          animation: slide-in 500ms;
+        }
+        .fade {
+          animation: fade-out 500ms;
+        }
+        @keyframes slide-in {
+          from {
+            transform: translateX(-10px);
+          }
+          to {
+            transform: translateX(0);
+          }
+        }
+        @keyframes fade-out {
+          from {
+            opacity: 1;
+          }
+          to {
+            opacity: 0;
+          }
+        }
+      `;
+
+      @Component({
+        selector: 'test-cmp',
+        styles: animateStyles,
+        template: `
+          <div>
+            @for (item of items(); track item) {
+              <p id="item-{{item}}" animate.enter="slide-in" (animate.leave)="fadeOut($event)">I should slide in {{item}}.</p>
+            }
+          </div>
+        `,
+        encapsulation: ViewEncapsulation.None,
+      })
+      class TestComponent {
+        items = signal([1, 2, 3]);
+
+        addremove() {
+          this.items.update((l) => l.slice(1).concat([l.at(-1)! + 1]));
+        }
+
+        fadeOut(event: AnimationCallbackEvent) {
+          event.target.classList.add('fade');
+          setTimeout(() => event.animationComplete(), 500);
+        }
+      }
+      TestBed.configureTestingModule({animationsEnabled: true});
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const cmp = fixture.componentInstance;
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+      const paragraphs = fixture.debugElement.queryAll(By.css('p'));
+      paragraphs.forEach((p) => {
+        p.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+        p.nativeElement.dispatchEvent(
+          new AnimationEvent('animationend', {animationName: 'slide-in'}),
+        );
+      });
+      cmp.addremove();
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+
+      const first = fixture.debugElement.query(By.css('p#item-1'));
+      const last = fixture.debugElement.query(By.css('p#item-4'));
+      first.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+      last.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+      expect(fixture.debugElement.queryAll(By.css('p.fade')).length).toBe(1);
+      expect(fixture.debugElement.queryAll(By.css('p.slide-in')).length).toBe(1);
+
+      last.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'slide-in'}),
+      );
+      first.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'fade-out'}),
+      );
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+      tick();
+
+      expect(fixture.debugElement.queryAll(By.css('p')).length).toBe(3);
+      expect(fixture.debugElement.queryAll(By.css('p.slide-in')).length).toBe(0);
+      expect(fixture.debugElement.queryAll(By.css('p.fade')).length).toBe(0);
+    }));
+
     it('should always run animations for custom repeater loops when adding and removing quickly', fakeAsync(() => {
       const animateStyles = `
         .slide-in {
