fix(core): skip leave animations on view swaps

We accounted for skipping leave animations during moves, but not swaps.
This accounts for the swap cases. Essentially any time a detach is fired
by liveCollection during a swap or move, we want to skip leave animations.
The only case where we don't want to skip is a destroy action.

fixes: angular#64818
fixes: angular#64730

Author: thePunderWoman

packages/core/src/render3/list_reconciliation.ts

@@ -36,9 +36,9 @@ export abstract class LiveCollection<T, V> {
   swap(index1: number, index2: number): void {
     const startIdx = Math.min(index1, index2);
     const endIdx = Math.max(index1, index2);
-    const endItem = this.detach(endIdx);
+    const endItem = this.detach(endIdx, true /* skipLeaveAnimations */);
     if (endIdx - startIdx > 1) {
-      const startItem = this.detach(startIdx);
+      const startItem = this.detach(startIdx, true /* skipLeaveAnimations */);
       this.attach(startIdx, endItem);
       this.attach(endIdx, startItem);
     } else {
@@ -223,7 +223,13 @@ export function reconcile<T, V>(
         // We know that the new item exists later on in old collection but we don't know its index
         // and as the consequence can't move it (don't know where to find it). Detach the old item,
         // hoping that it unlocks the fast path again.
-        detachedItems.set(liveStartKey, liveCollection.detach(liveStartIdx));
+
+        // we don't always know if we should skip leave animations here. We need to actually check
+        // to see if the item is actually new in the new collection to know if it should skip leave
+        // animations.
+        const skipLeaveAnimations =
+          newCollection.find((itm) => liveStartValue === itm) !== undefined;
+        detachedItems.set(liveStartKey, liveCollection.detach(liveStartIdx, skipLeaveAnimations));
         liveEndIdx--;
       }
     }

packages/core/test/acceptance/animation_spec.ts

@@ -2057,6 +2057,47 @@ describe('Animation', () => {
       expect(fixture.debugElement.queryAll(By.css('p')).length).toBe(3);
     }));
 
+    it('should not remove elements when swapping or moving nodes', fakeAsync(() => {
+      const animateSpy = jasmine.createSpy('animateSpy');
+      @Component({
+        selector: 'test-cmp',
+        template: `
+          <div>
+            @for (item of items; track item.id) {
+              <p (animate.leave)="animate($event)" #el>{{ item.id }}</p>
+            }
+          </div>
+        `,
+        encapsulation: ViewEncapsulation.None,
+      })
+      class TestComponent {
+        items = [{id: 1}, {id: 2}, {id: 3}];
+        private cd = inject(ChangeDetectorRef);
+
+        animate(event: AnimationCallbackEvent) {
+          animateSpy();
+          event.animationComplete();
+        }
+
+        shuffle() {
+          this.items = this.shuffleArray(this.items);
+          this.cd.markForCheck();
+        }
+
+        shuffleArray<T>(array: readonly T[]): T[] {
+          return [array[1], array[2], array[0]];
+        }
+      }
+      TestBed.configureTestingModule({animationsEnabled: true});
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const cmp = fixture.componentInstance;
+      cmp.shuffle();
+      fixture.detectChanges();
+      expect(animateSpy).not.toHaveBeenCalled();
+      expect(fixture.debugElement.queryAll(By.css('p')).length).toBe(3);
+    }));
+
     it('should not remove elements when child element animations finish', fakeAsync(() => {
       const animateStyles = `
         .fade {