fix(animations): ensure parent animations are triggered before children (#11201)

modules/@angular/core/src/animation/animation_queue.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AnimationPlayer} from './animation_player';
+
+var _queuedAnimations: AnimationPlayer[] = [];
+
+/** @internal */
+export function queueAnimation(player: AnimationPlayer) {
+  _queuedAnimations.push(player);
+}
+
+/** @internal */
+export function triggerQueuedAnimations() {
+  for (var i = 0; i < _queuedAnimations.length; i++) {
+    var player = _queuedAnimations[i];
+    player.play();
+  }
+  _queuedAnimations = [];
+}

modules/@angular/core/src/linker/view.ts

@@ -9,6 +9,7 @@
 import {AnimationGroupPlayer} from '../animation/animation_group_player';
 import {AnimationOutput} from '../animation/animation_output';
 import {AnimationPlayer, NoOpAnimationPlayer} from '../animation/animation_player';
+import {queueAnimation} from '../animation/animation_queue';
 import {AnimationTransitionEvent} from '../animation/animation_transition_event';
 import {ViewAnimationMap} from '../animation/view_animation_map';
 import {ChangeDetectorRef, ChangeDetectorStatus} from '../change_detection/change_detection';
@@ -84,23 +85,18 @@ export abstract class AppView<T> {
   queueAnimation(
       element: any, animationName: string, player: AnimationPlayer, totalTime: number,
       fromState: string, toState: string): void {
+    queueAnimation(player);
     var event = new AnimationTransitionEvent(
         {'fromState': fromState, 'toState': toState, 'totalTime': totalTime});
     this.animationPlayers.set(element, animationName, player);
+
     player.onDone(() => {
       // TODO: make this into a datastructure for done|start
       this.triggerAnimationOutput(element, animationName, 'done', event);
       this.animationPlayers.remove(element, animationName);
     });
-    player.onStart(() => { this.triggerAnimationOutput(element, animationName, 'start', event); });
-  }
 
-  triggerQueuedAnimations() {
-    this.animationPlayers.getAllPlayers().forEach(player => {
-      if (!player.hasStarted()) {
-        player.play();
-      }
-    });
+    player.onStart(() => { this.triggerAnimationOutput(element, animationName, 'start', event); });
   }
 
   triggerAnimationOutput(

modules/@angular/core/src/linker/view_ref.ts

@@ -6,11 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {triggerQueuedAnimations} from '../animation/animation_queue';
 import {ChangeDetectorRef} from '../change_detection/change_detector_ref';
 import {ChangeDetectorStatus} from '../change_detection/constants';
 import {unimplemented} from '../facade/errors';
+
 import {AppView} from './view';
 
+
 /**
  * @stable
  */
@@ -104,7 +107,10 @@ export class ViewRef_<C> implements EmbeddedViewRef<C>, ChangeDetectorRef {
 
   markForCheck(): void { this._view.markPathToRootAsCheckOnce(); }
   detach(): void { this._view.cdMode = ChangeDetectorStatus.Detached; }
-  detectChanges(): void { this._view.detectChanges(false); }
+  detectChanges(): void {
+    this._view.detectChanges(false);
+    triggerQueuedAnimations();
+  }
   checkNoChanges(): void { this._view.detectChanges(true); }
   reattach(): void {
     this._view.cdMode = this._originalMode;