fix(animations): ensure DOM is cleaned up after multiple @trigger lea…

…ve animations finish Closes #20541
angular · Dec 1, 2017 · 980d6f7 · 980d6f7
1 parent 47addd1
commit 980d6f7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/packages/animations/src/players/animation_group_player.ts b/packages/animations/src/players/animation_group_player.ts
@@ -32,7 +32,6 @@ export class AnimationGroupPlayer implements AnimationPlayer {
       scheduleMicroTask(() => this._onFinish());
     } else {
       this.players.forEach(player => {
-        player.parentPlayer = this;
         player.onDone(() => {
           if (++doneCount >= total) {
             this._onFinish();

diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
@@ -2310,6 +2310,66 @@ export function main() {
            expect(cmp.event2.triggerName).toBeTruthy('ani2');
          }));
 
+      it('should handle a leave animation for multiple triggers even if not all triggers have their own leave transition specified',
+         fakeAsync(() => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
+               <div *ngIf="exp" @foo @bar>123</div>
+             `,
+             animations: [
+               trigger(
+                   'foo',
+                   [
+                     transition(
+                         ':enter',
+                         [
+                           style({opacity: 0}),
+                           animate(1000, style({opacity: 1})),
+                         ]),
+                   ]),
+               trigger(
+                   'bar',
+                   [
+                     transition(
+                         ':leave',
+                         [
+                           animate(1000, style({opacity: 0})),
+                         ]),
+                   ])
+             ],
+           })
+           class Cmp {
+             exp: boolean = false;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const fixture = TestBed.createComponent(Cmp);
+           const elm = fixture.elementRef.nativeElement;
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           let [p1] = players;
+           p1.finish();
+           flushMicrotasks();
+           expect(elm.innerText.trim()).toEqual('123');
+
+           resetLog();
+           cmp.exp = false;
+           fixture.detectChanges();
+
+           players = getLog();
+           expect(players.length).toEqual(1);
+           [p1] = players;
+           p1.finish();
+           flushMicrotasks();
+           expect(elm.innerText.trim()).toEqual('');
+         }));
+
       it('should trigger a state change listener for when the animation changes state from void => state on the host element',
          fakeAsync(() => {
            @Component({