fix(animations): allow animations to be destroyed manually (#12719)

Closes #12456
Closes #12719

modules/@angular/platform-browser/src/dom/web_animations_player.ts

@@ -7,7 +7,6 @@
  */
 
 import {AUTO_STYLE} from '@angular/core';
-import {isPresent} from '../facade/lang';
 import {AnimationPlayer} from '../private_import_core';
 
 import {getDOM} from './dom_adapter';
@@ -16,11 +15,12 @@ import {DomAnimatePlayer} from './dom_animate_player';
 export class WebAnimationsPlayer implements AnimationPlayer {
   private _onDoneFns: Function[] = [];
   private _onStartFns: Function[] = [];
-  private _finished = false;
-  private _initialized = false;
   private _player: DomAnimatePlayer;
-  private _started: boolean = false;
   private _duration: number;
+  private _initialized = false;
+  private _finished = false;
+  private _started = false;
+  private _destroyed = false;
 
   public parentPlayer: AnimationPlayer = null;
 
@@ -33,9 +33,6 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   private _onFinish() {
     if (!this._finished) {
       this._finished = true;
-      if (!isPresent(this.parentPlayer)) {
-        this.destroy();
-      }
       this._onDoneFns.forEach(fn => fn());
       this._onDoneFns = [];
     }
@@ -57,7 +54,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
 
     // this is required so that the player doesn't start to animate right away
-    this.reset();
+    this._resetDomPlayerState();
     this._player.onfinish = () => this._onFinish();
   }
 
@@ -91,7 +88,14 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     this._player.finish();
   }
 
-  reset(): void { this._player.cancel(); }
+  reset(): void {
+    this._resetDomPlayerState();
+    this._destroyed = false;
+    this._finished = false;
+    this._started = false;
+  }
+
+  private _resetDomPlayerState() { this._player.cancel(); }
 
   restart(): void {
     this.reset();
@@ -101,8 +105,11 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   hasStarted(): boolean { return this._started; }
 
   destroy(): void {
-    this.reset();
-    this._onFinish();
+    if (!this._destroyed) {
+      this._resetDomPlayerState();
+      this._onFinish();
+      this._destroyed = true;
+    }
   }
 
   get totalTime(): number { return this._duration; }

modules/@angular/platform-browser/test/dom/web_animations_player_spec.ts

@@ -110,12 +110,12 @@ export function main() {
          expect(count).toEqual(2);
        });
 
-    it('should destroy itself automatically if a parent player is not present', () => {
+    it('should not destroy itself automatically if a parent player is not present', () => {
       captures['cancel'] = [];
       player.finish();
 
       expect(captures['finish'].length).toEqual(1);
-      expect(captures['cancel'].length).toEqual(1);
+      expect(captures['cancel'].length).toEqual(0);
 
       var next = makePlayer();
       var player2 = next['player'];
@@ -139,5 +139,20 @@ export function main() {
       player.play();
       expect(calls).toEqual(1);
     });
+
+    it('should not allow the player to be cancelled via destroy if it has already been destroyed unless reset',
+       () => {
+         captures['cancel'] = [];
+         expect(captures['cancel'].length).toBe(0);
+         player.destroy();
+         expect(captures['cancel'].length).toBe(1);
+         captures['cancel'] = [];
+         player.destroy();
+         expect(captures['cancel'].length).toBe(0);
+         player.reset();
+         captures['cancel'] = [];
+         player.destroy();
+         expect(captures['cancel'].length).toBe(1);
+       });
   });
 }