fix(core): fixes a regression with animate.leave and reordering

This fixes a regression bug that resulted in reordered elements not getting properly removed from the DOM. Reused nodes were not being cleared out in this situation.

fixes: #67728

integration/animations/e2e/src/animations.e2e-spec.ts

@@ -114,4 +114,23 @@ describe('Animations Integration', () => {
       'Nested child component should have been removed immediately during routing',
     );
   });
+
+  it('should remove elements from DOM after reordering and removal with (animate.leave)', async () => {
+    // Wait for the test elements to be rendered
+    await page.waitForSelector('.test-item');
+
+    let items = await page.$$('.test-item');
+    expect(items.length).toBe(2);
+
+    // Shuffle
+    await page.click('#shuffle-test');
+    await new Promise((res) => setTimeout(res, 500));
+
+    // Remove
+    await page.click('#remove-test');
+    await new Promise((res) => setTimeout(res, 500));
+
+    items = await page.$$('.test-item');
+    expect(items.length).toBe(1);
+  });
 });

integration/animations/src/app/app.component.html

@@ -17,3 +17,11 @@
 }
 
 <button id="hide-and-intercept" (click)="hideAndIntercept()">Hide and Intercept</button>
+
+<div class="test-reorder-container">
+  @for (item of testItems; track item) {
+    <div class="test-item" (animate.leave)="onTestLeave($event)">Item {{ item }}</div>
+  }
+</div>
+<button id="shuffle-test" (click)="shuffleTest()">Shuffle Test</button>
+<button id="remove-test" (click)="removeTest()">Remove Test</button>

integration/animations/src/app/home.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, AnimationCallbackEvent} from '@angular/core';
 import {
   CdkDragDrop,
   CdkDropList,
@@ -20,6 +20,8 @@ export class HomeComponent {
     'Episode III - Revenge of the Sith',
   ];
 
+  testItems = ['A', 'B'];
+
   showFallback = true;
 
   drop(event: CdkDragDrop<string[]>) {
@@ -39,4 +41,16 @@ export class HomeComponent {
     }
     this.showFallback = false;
   }
+
+  shuffleTest() {
+    this.testItems = ['B', 'A'];
+  }
+
+  removeTest() {
+    this.testItems = ['A'];
+  }
+
+  onTestLeave(event: AnimationCallbackEvent) {
+    event.animationComplete();
+  }
 }