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

Closes #9402
Closes #9775

modules/@angular/platform-browser/testing/mock_animation_driver.ts

@@ -14,7 +14,7 @@ import {AnimationDriver} from '../src/dom/animation_driver';
 import {StringMapWrapper} from '../src/facade/collection';
 
 export class MockAnimationDriver extends AnimationDriver {
-  log: any[] /** TODO #9100 */ = [];
+  public log: {[key: string]: any}[] = [];
   animate(
       element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[],
       duration: number, delay: number, easing: string): AnimationPlayer {
@@ -38,11 +38,9 @@ function _serializeKeyframes(keyframes: AnimationKeyframe[]): any[] {
 }
 
 function _serializeStyles(styles: AnimationStyles): {[key: string]: any} {
-  var flatStyles = {};
-  styles.styles.forEach(
-      entry => StringMapWrapper.forEach(
-          entry, (val: any /** TODO #9100 */, prop: any /** TODO #9100 */) => {
-            (flatStyles as any /** TODO #9100 */)[prop] = val;
-          }));
+  var flatStyles: {[key: string]: any} = {};
+  styles.styles.forEach(entry => StringMapWrapper.forEach(entry, (val: any, prop: string) => {
+    flatStyles[prop] = val;
+  }));
   return flatStyles;
 }

modules/@angular/platform-browser/testing/mock_animation_player.ts

@@ -0,0 +1,64 @@
+/**
+ * @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 '../../core/src/animation/animation_player';
+import {isPresent} from '../../core/src/facade/lang';
+
+export class MockAnimationPlayer implements AnimationPlayer {
+  private _subscriptions: any[] /** TODO #9100 */ = [];
+  private _finished = false;
+  private _destroyed = false;
+  private _started: boolean = false;
+
+  public parentPlayer: AnimationPlayer = null;
+
+  public log: any[] /** TODO #9100 */ = [];
+
+  private _onfinish(): void {
+    if (!this._finished) {
+      this._finished = true;
+      this.log.push('finish');
+
+      this._subscriptions.forEach((entry) => { entry(); });
+      this._subscriptions = [];
+      if (!isPresent(this.parentPlayer)) {
+        this.destroy();
+      }
+    }
+  }
+
+  init(): void { this.log.push('init'); }
+
+  onDone(fn: Function): void { this._subscriptions.push(fn); }
+
+  hasStarted() { return this._started; }
+
+  play(): void {
+    this._started = true;
+    this.log.push('play');
+  }
+
+  pause(): void { this.log.push('pause'); }
+
+  restart(): void { this.log.push('restart'); }
+
+  finish(): void { this._onfinish(); }
+
+  reset(): void { this.log.push('reset'); }
+
+  destroy(): void {
+    if (!this._destroyed) {
+      this._destroyed = true;
+      this.finish();
+      this.log.push('destroy');
+    }
+  }
+
+  setPosition(p: any /** TODO #9100 */): void {}
+  getPosition(): number { return 0; }
+}