fix(core): fix support for space separated strings in leave animations (#62979)

thePunderWoman · crisbeto · commit 6597ac0af78a · 2025-08-04T12:24:11.000+02:00
Space separated strings, e.g. `class-1 class-2`, should work with both enter and leave animations. `animate.leave` lost that functionality in a refactor. Tests are now added to catch this. fixes: #62964 PR Close #62979
diff --git a/packages/core/src/animation.ts b/packages/core/src/animation.ts
@@ -96,7 +96,8 @@ export class ElementRegistry {
 
   /** Used when animate.leave is only applying classes */
   trackClasses(details: AnimationDetails, classes: string | string[]): void {
-    const classList = typeof classes === 'string' ? [classes] : classes;
+    const classList = getClassListFromValue(classes);
+    if (!classList) return;
     for (let klass of classList) {
       details.classes?.add(klass);
     }
@@ -175,3 +176,15 @@ export class ElementRegistry {
     details.animateFn(remove);
   }
 }
+
+export function getClassListFromValue(value: string | Function | string[]): string[] | null {
+  const classes = typeof value === 'function' ? value() : value;
+  let classList: string[] | null = Array.isArray(classes) ? classes : null;
+  if (typeof classes === 'string') {
+    classList = classes
+      .trim()
+      .split(/\s+/)
+      .filter((k) => k);
+  }
+  return classList;
+}
diff --git a/packages/core/src/render3/instructions/animation.ts b/packages/core/src/render3/instructions/animation.ts
@@ -14,6 +14,7 @@ import {
   AnimationFunction,
   AnimationRemoveFunction,
   ANIMATIONS_DISABLED,
+  getClassListFromValue,
   LongestAnimation,
 } from '../../animation';
 import {getLView, getCurrentTNode, getTView, getAnimationElementRemovalRegistry} from '../state';
@@ -27,7 +28,6 @@ import {NgZone} from '../../zone';
 import {assertDefined} from '../../util/assert';
 
 const DEFAULT_ANIMATIONS_DISABLED = false;
-const WS_REGEXP = /\s+/;
 const areAnimationSupported =
   (typeof ngServerMode === 'undefined' || !ngServerMode) &&
   typeof document !== 'undefined' &&
@@ -352,18 +352,6 @@ function getLongestAnimation(
   return currentLongest;
 }
 
-function getClassListFromValue(value: string | Function): string[] | null {
-  const classes = typeof value === 'function' ? value() : value;
-  let classList: string[] | null = classes instanceof Array ? classes : null;
-  if (typeof classes === 'string') {
-    classList = classes
-      .trim()
-      .split(WS_REGEXP)
-      .filter((k) => k);
-  }
-  return classList;
-}
-
 function setupAnimationCancel(event: Event, classList: string[] | null, renderer: Renderer) {
   if (!(event.target instanceof Element)) return;
   const nativeElement = event.target;
diff --git a/packages/core/test/acceptance/animation_spec.ts b/packages/core/test/acceptance/animation_spec.ts
@@ -28,7 +28,7 @@ describe('Animation', () => {
   describe('animate.leave', () => {
     const styles = `
     .fade {
-      animation: fade-out 1s;
+      animation: fade-out 1ms;
     }
     @keyframes fade-out {
       from {
@@ -70,7 +70,7 @@ describe('Animation', () => {
         new AnimationEvent('animationend', {animationName: 'fade-out'}),
       );
       expect(fixture.nativeElement.outerHTML).not.toContain('class="fade"');
-    }, 100_000);
+    });
 
     it('should remove right away when animations are disabled', () => {
       @Component({
@@ -96,10 +96,10 @@ describe('Animation', () => {
     it('should support string arrays', () => {
       const multiple = `
         .slide-out {
-          animation: slide-out 2s;
+          animation: slide-out 2ms;
         }
         .fade {
-          animation: fade-out 1s;
+          animation: fade-out 1ms;
         }
         @keyframes slide-out {
           from {
@@ -155,6 +155,67 @@ describe('Animation', () => {
       expect(fixture.nativeElement.outerHTML).not.toContain('class="slide-out fade"');
     });
 
+    it('should support multiple classes as a single string with spaces', () => {
+      const multiple = `
+        .slide-out {
+          animation: slide-out 2ms;
+        }
+        .fade {
+          animation: fade-out 1ms;
+        }
+        @keyframes slide-out {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(10px);
+          }
+        }
+        @keyframes fade-out {
+          from {
+            opacity: 1;
+          }
+          to {
+            opacity: 0;
+          }
+        }
+      `;
+      @Component({
+        selector: 'test-cmp',
+        styles: multiple,
+        template:
+          '<div>@if (show()) {<p animate.leave="slide-out fade" #el>I should slide out</p>}</div>',
+        encapsulation: ViewEncapsulation.None,
+      })
+      class TestComponent {
+        show = signal(true);
+        @ViewChild('el', {read: ElementRef}) el!: ElementRef<HTMLParagraphElement>;
+      }
+
+      TestBed.configureTestingModule({animationsEnabled: true});
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const cmp = fixture.componentInstance;
+      fixture.detectChanges();
+      const paragragh = fixture.debugElement.query(By.css('p'));
+
+      expect(fixture.nativeElement.outerHTML).not.toContain('class="slide-out fade"');
+      cmp.show.set(false);
+      fixture.detectChanges();
+      expect(cmp.show()).toBeFalsy();
+      fixture.detectChanges();
+      paragragh.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+      expect(fixture.nativeElement.outerHTML).toContain('class="slide-out fade"');
+      fixture.detectChanges();
+      paragragh.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'fade-out'}),
+      );
+      paragragh.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'slide-out'}),
+      );
+      expect(fixture.nativeElement.outerHTML).not.toContain('class="slide-out fade"');
+    });
+
     it('should support function syntax', () => {
       @Component({
         selector: 'test-cmp',
@@ -224,10 +285,10 @@ describe('Animation', () => {
     it('should compose class list when host binding and regular binding', () => {
       const multiple = `
         .slide-out {
-          animation: slide-out 2s;
+          animation: slide-out 2ms;
         }
         .fade {
-          animation: fade-out 1s;
+          animation: fade-out 1ms;
         }
         @keyframes slide-out {
           from {
@@ -301,10 +362,10 @@ describe('Animation', () => {
     it('should compose class list when host binding on a directive and regular binding', () => {
       const multiple = `
         .slide-out {
-          animation: slide-out 2s;
+          animation: slide-out 2ms;
         }
         .fade {
-          animation: fade-out 1s;
+          animation: fade-out 1ms;
         }
         @keyframes slide-out {
           from {
@@ -376,10 +437,10 @@ describe('Animation', () => {
     it('should compose class list when host binding a string and regular class strings', () => {
       const multiple = `
         .slide-out {
-          animation: slide-out 2s;
+          animation: slide-out 2ms;
         }
         .fade {
-          animation: fade-out 1s;
+          animation: fade-out 1ms;
         }
         @keyframes slide-out {
           from {
@@ -448,10 +509,10 @@ describe('Animation', () => {
   describe('animate.enter', () => {
     const styles = `
     .slide-in {
-      animation: slide-in 1s;
+      animation: slide-in 1ms;
     }
     .fade-in {
-      animation: fade-in 2s;
+      animation: fade-in 2ms;
     }
     @keyframes slide-in {
       from {
@@ -574,10 +635,10 @@ describe('Animation', () => {
     it('should support string arrays', () => {
       const multiple = `
       .slide-in {
-        animation: slide-in 1s;
+        animation: slide-in 1ms;
       }
       .fade-in {
-        animation: fade-in 2s;
+        animation: fade-in 2ms;
       }
       @keyframes slide-in {
         from {
@@ -619,6 +680,53 @@ describe('Animation', () => {
       expect(cmp.el.nativeElement.outerHTML).toContain('class="slide-in fade-in"');
     });
 
+    it('should support multple classes as a single string separated by a space', () => {
+      const multiple = `
+      .slide-in {
+        animation: slide-in 1ms;
+      }
+      .fade-in {
+        animation: fade-in 2ms;
+      }
+      @keyframes slide-in {
+        from {
+          transform: translateX(-10px);
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      `;
+      @Component({
+        selector: 'test-cmp',
+        styles: multiple,
+        template:
+          '<div>@if (show()) {<p animate.enter="slide-in fade-in" #el>I should slide in</p>}</div>',
+        encapsulation: ViewEncapsulation.None,
+      })
+      class TestComponent {
+        show = signal(false);
+        @ViewChild('el', {read: ElementRef}) el!: ElementRef<HTMLParagraphElement>;
+      }
+      TestBed.configureTestingModule({animationsEnabled: true});
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const cmp = fixture.componentInstance;
+      fixture.detectChanges();
+      cmp.show.set(true);
+      fixture.detectChanges();
+      expect(cmp.show()).toBeTruthy();
+      expect(cmp.el.nativeElement.outerHTML).toContain('class="slide-in fade-in"');
+    });
+
     it('should remove right away when animations are disabled', fakeAsync(() => {
       @Component({
         selector: 'test-cmp',
