fix(core): Fixes animate.leave binding to a string with spaces (#63366)

thePunderWoman · AndrewKushnir · commit 9139fe0d9507 · 2025-08-25T08:33:30.000-07:00
This fixes the rare case that someone uses binding syntax with `animate.leave` providing a value with a string that has spaces in it. For example: ``` <example `[animate.leave]="'class-a class-b"` /> ``` fixes: #63365 PR Close #63366
diff --git a/packages/core/src/render3/instructions/animation.ts b/packages/core/src/render3/instructions/animation.ts
@@ -430,13 +430,11 @@ function getClassList(value: Set<string> | null, resolvers: Function[] | undefin
   const classList = new Set<string>(value);
   if (resolvers && resolvers.length) {
     for (const resolverFn of resolvers) {
-      const resolvedValue = resolverFn();
-      if (resolvedValue instanceof Array) {
+      const resolvedValue = getClassListFromValue(resolverFn);
+      if (resolvedValue) {
         for (const rv of resolvedValue) {
           classList.add(rv);
         }
-      } else {
-        classList.add(resolvedValue);
       }
     }
   }
diff --git a/packages/core/test/acceptance/animation_spec.ts b/packages/core/test/acceptance/animation_spec.ts
@@ -185,6 +185,66 @@ describe('Animation', () => {
       expect(fixture.nativeElement.outerHTML).not.toContain('class="slide-out fade"');
     }));
 
+    it('should support binding strings with spaces', fakeAsync(() => {
+      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();
+      tickAnimationFrames(1);
+      expect(cmp.show()).toBeFalsy();
+      fixture.detectChanges();
+      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 multiple classes as a single string with spaces', fakeAsync(() => {
       const multiple = `
         .slide-out {
@@ -812,6 +872,60 @@ describe('Animation', () => {
       expect(cmp.el.nativeElement.outerHTML).not.toContain('class="slide-in fade-in"');
     }));
 
+    it('should support binding to a string with a space', fakeAsync(() => {
+      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();
+      expect(cmp.show()).toBeFalsy();
+      cmp.show.set(true);
+      fixture.detectChanges();
+      tickAnimationFrames(1);
+      const paragraph = fixture.debugElement.query(By.css('p'));
+      expect(cmp.show()).toBeTruthy();
+      expect(cmp.el.nativeElement.outerHTML).toContain('class="slide-in fade-in"');
+      paragraph.nativeElement.dispatchEvent(new AnimationEvent('animationstart'));
+      paragraph.nativeElement.dispatchEvent(
+        new AnimationEvent('animationend', {animationName: 'fade-in'}),
+      );
+      expect(cmp.el.nativeElement.outerHTML).not.toContain('class="slide-in fade-in"');
+    }));
+
     it('should support multple classes as a single string separated by a space', fakeAsync(() => {
       const multiple = `
       .slide-in {

Original file line number	Diff line number	Diff line change
`@@ -430,13 +430,11 @@ function getClassList(value: Set<string> \| null, resolvers: Function[] \| undefin`
`430`	`430`	`const classList = new Set<string>(value);`
`431`	`431`	`if (resolvers && resolvers.length) {`
`432`	`432`	`for (const resolverFn of resolvers) {`
`433`		`- const resolvedValue = resolverFn();`
`434`		`- if (resolvedValue instanceof Array) {`
	`433`	`+ const resolvedValue = getClassListFromValue(resolverFn);`
	`434`	`+ if (resolvedValue) {`
`435`	`435`	`for (const rv of resolvedValue) {`
`436`	`436`	`classList.add(rv);`
`437`	`437`	`}`
`438`		`- } else {`
`439`		`- classList.add(resolvedValue);`
`440`	`438`	`}`
`441`	`439`	`}`
`442`	`440`	`}`