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(
-          prevPlayer => { getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer); });
+      previousPlayers.forEach(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 = [];
     }