fix(animations): make sure animation cancellations respect AUTO style values (#18787)

Closes #17450

PR Close #18787

packages/animations/browser/src/render/transition_animation_engine.ts

@@ -961,12 +961,12 @@ export class TransitionAnimationEngine {
       const element = player.element;
       const previousPlayers =
           this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
-      previousPlayers.forEach(
+      previousPlayers.forEach(prevPlayer => {
-          prevPlayer => { getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer); });
+        getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer);
+        prevPlayer.destroy();
+      });
     });
 
-    allPreviousPlayersMap.forEach(players => players.forEach(player => player.destroy()));
-
     // PRE STAGE: fill the ! styles
     const preStylesMap = allPreStyleElements.size ?
         cloakAndComputeStyles(
@@ -1153,10 +1153,6 @@ export class TransitionAnimationEngine {
   private _beforeAnimationBuild(
       namespaceId: string, instruction: AnimationTransitionInstruction,
       allPreviousPlayersMap: Map<any, TransitionAnimationPlayer[]>) {
-    // it's important to do this step before destroying the players
-    // so that the onDone callback below won't fire before this
-    eraseStyles(instruction.element, instruction.fromStyles);
-
     const triggerName = instruction.triggerName;
     const rootElement = instruction.element;
 
@@ -1178,9 +1174,14 @@ export class TransitionAnimationEngine {
         if (realPlayer.beforeDestroy) {
           realPlayer.beforeDestroy();
         }
+        player.destroy();
         players.push(player);
       });
     });
+
+    // this needs to be done so that the PRE/POST styles can be
+    // computed properly without interfering with the previous animation
+    eraseStyles(rootElement, instruction.fromStyles);
   }
 
   private _buildAnimation(

packages/animations/browser/src/render/web_animations/web_animations_player.ts

@@ -158,9 +158,9 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
   destroy(): void {
     if (!this._destroyed) {
+      this._destroyed = true;
       this._resetDomPlayerState();
       this._onFinish();
-      this._destroyed = true;
       this._onDestroyFns.forEach(fn => fn());
       this._onDestroyFns = [];
     }

packages/animations/browser/test/render/transition_animation_engine_spec.ts

@@ -411,8 +411,10 @@ export function main() {
          () => {
            const engine = makeEngine();
            const trig = trigger('something', [
-             state('x', style({opacity: 0})), state('y', style({opacity: .5})),
+             state('x', style({opacity: 0})),
-             state('z', style({opacity: 1})), transition('* => *', animate(1000))
+             state('y', style({opacity: .5})),
+             state('z', style({opacity: 1})),
+             transition('* => *', animate(1000)),
            ]);
 
            registerTrigger(element, engine, trig);
@@ -428,7 +430,7 @@ export function main() {
 
            const player2 = engine.players[0];
 
-           expect(parseFloat(element.style.opacity)).toEqual(.5);
+           expect(parseFloat(element.style.opacity)).not.toEqual(.5);
 
            player2.finish();
            expect(parseFloat(element.style.opacity)).toEqual(1);