fix(animations): ensure all child elements are rendered before running animations

Closes #9402
Closes #9775
Closes #9887

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

@@ -14,6 +14,8 @@ import {AnimationPlayer} from './animation_player';
 export class AnimationGroupPlayer implements AnimationPlayer {
   private _subscriptions: Function[] = [];
   private _finished = false;
+  private _started = false;
+
   public parentPlayer: AnimationPlayer = null;
 
   constructor(private _players: AnimationPlayer[]) {
@@ -44,9 +46,19 @@ export class AnimationGroupPlayer implements AnimationPlayer {
     }
   }
 
+  init(): void { this._players.forEach(player => player.init()); }
+
   onDone(fn: Function): void { this._subscriptions.push(fn); }
 
-  play() { this._players.forEach(player => player.play()); }
+  hasStarted() { return this._started; }
+
+  play() {
+    if (!isPresent(this.parentPlayer)) {
+      this.init();
+    }
+    this._started = true;
+    this._players.forEach(player => player.play());
+  }
 
   pause(): void { this._players.forEach(player => player.pause()); }
 

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

@@ -15,6 +15,8 @@ import {scheduleMicroTask} from '../facade/lang';
  */
 export abstract class AnimationPlayer {
   abstract onDone(fn: Function): void;
+  abstract init(): void;
+  abstract hasStarted(): boolean;
   abstract play(): void;
   abstract pause(): void;
   abstract restart(): void;
@@ -31,6 +33,7 @@ export abstract class AnimationPlayer {
 
 export class NoOpAnimationPlayer implements AnimationPlayer {
   private _subscriptions: any[] /** TODO #9100 */ = [];
+  private _started = false;
   public parentPlayer: AnimationPlayer = null;
   constructor() { scheduleMicroTask(() => this._onFinish()); }
   /** @internal */
@@ -39,7 +42,9 @@ export class NoOpAnimationPlayer implements AnimationPlayer {
     this._subscriptions = [];
   }
   onDone(fn: Function): void { this._subscriptions.push(fn); }
-  play(): void {}
+  hasStarted(): boolean { return this._started; }
+  init(): void {}
+  play(): void { this._started = true; }
   pause(): void {}
   restart(): void {}
   finish(): void { this._onFinish(); }

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

@@ -15,6 +15,7 @@ export class AnimationSequencePlayer implements AnimationPlayer {
   private _activePlayer: AnimationPlayer;
   private _subscriptions: Function[] = [];
   private _finished = false;
+  private _started: boolean = false;
 
   public parentPlayer: AnimationPlayer = null;
 
@@ -54,9 +55,19 @@ export class AnimationSequencePlayer implements AnimationPlayer {
     }
   }
 
+  init(): void { this._players.forEach(player => player.init()); }
+
   onDone(fn: Function): void { this._subscriptions.push(fn); }
 
-  play(): void { this._activePlayer.play(); }
+  hasStarted() { return this._started; }
+
+  play(): void {
+    if (!isPresent(this.parentPlayer)) {
+      this.init();
+    }
+    this._started = true;
+    this._activePlayer.play();
+  }
 
   pause(): void { this._activePlayer.pause(); }
 

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

@@ -11,7 +11,7 @@ import {isPresent} from '../facade/lang';
 
 import {AnimationPlayer} from './animation_player';
 
-export class ActiveAnimationPlayersMap {
+export class ViewAnimationMap {
   private _map = new Map<any, {[key: string]: AnimationPlayer}>();
   private _allPlayers: AnimationPlayer[] = [];
 
@@ -25,9 +25,9 @@ export class ActiveAnimationPlayersMap {
   }
 
   findAllPlayersByElement(element: any): AnimationPlayer[] {
-    var players: any[] /** TODO #9100 */ = [];
+    var players: AnimationPlayer[] = [];
     StringMapWrapper.forEach(
-        this._map.get(element), (player: any /** TODO #9100 */) => players.push(player));
+        this._map.get(element), (player: AnimationPlayer) => players.push(player));
     return players;
   }