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

This reverts commit cbe85a0893.

modules/@angular/platform-browser/src/dom/web_animations_driver.ts

@@ -11,7 +11,9 @@ import {AUTO_STYLE, BaseException} from '@angular/core';
 import {AnimationKeyframe, AnimationPlayer, AnimationStyles, NoOpAnimationPlayer} from '../../core_private';
 import {StringMapWrapper} from '../facade/collection';
 import {StringWrapper, isNumber, isPresent} from '../facade/lang';
+
 import {AnimationDriver} from './animation_driver';
+import {getDOM} from './dom_adapter';
 import {DomAnimatePlayer} from './dom_animate_player';
 import {dashCaseToCamelCase} from './util';
 import {WebAnimationsPlayer} from './web_animations_player';
@@ -19,17 +21,19 @@ import {WebAnimationsPlayer} from './web_animations_player';
 export class WebAnimationsDriver implements AnimationDriver {
   animate(
       element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[],
-      duration: number, delay: number, easing: string): WebAnimationsPlayer {
+      duration: number, delay: number, easing: string): AnimationPlayer {
+    var anyElm = <any>element;
+
     var formattedSteps: {[key: string]: string | number}[] = [];
     var startingStyleLookup: {[key: string]: string | number} = {};
     if (isPresent(startingStyles) && startingStyles.styles.length > 0) {
-      startingStyleLookup = _populateStyles(element, startingStyles, {});
+      startingStyleLookup = _populateStyles(anyElm, startingStyles, {});
       startingStyleLookup['offset'] = 0;
       formattedSteps.push(startingStyleLookup);
     }
 
     keyframes.forEach((keyframe: AnimationKeyframe) => {
-      let data = _populateStyles(element, keyframe.styles, startingStyleLookup);
+      let data = _populateStyles(anyElm, keyframe.styles, startingStyleLookup);
       data['offset'] = keyframe.offset;
       formattedSteps.push(data);
     });
@@ -56,7 +60,14 @@ export class WebAnimationsDriver implements AnimationDriver {
       playerOptions['easing'] = easing;
     }
 
-    return new WebAnimationsPlayer(element, formattedSteps, playerOptions);
+    var player = this._triggerWebAnimation(anyElm, formattedSteps, playerOptions);
+
+    return new WebAnimationsPlayer(player, duration);
+  }
+
+  /** @internal */
+  _triggerWebAnimation(elm: any, keyframes: any[], options: any): DomAnimatePlayer {
+    return elm.animate(keyframes, options);
   }
 }
 
@@ -67,8 +78,9 @@ function _populateStyles(
   styles.styles.forEach((entry) => {
     StringMapWrapper.forEach(entry, (val: any, prop: string) => {
       var formattedProp = dashCaseToCamelCase(prop);
-      data[formattedProp] =
-          val == AUTO_STYLE ? val : val.toString() + _resolveStyleUnit(val, prop, formattedProp);
+      data[formattedProp] = val == AUTO_STYLE ?
+          _computeStyle(element, formattedProp) :
+          val.toString() + _resolveStyleUnit(val, prop, formattedProp);
     });
   });
   StringMapWrapper.forEach(defaultStyles, (value: string, prop: string) => {
@@ -142,3 +154,7 @@ function _isPixelDimensionStyle(prop: string): boolean {
       return false;
   }
 }
+
+function _computeStyle(element: any, prop: string): string {
+  return getDOM().getComputedStyle(element)[prop];
+}

modules/@angular/platform-browser/src/dom/web_animations_player.ts

@@ -6,29 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AUTO_STYLE} from '@angular/core';
-
 import {AnimationPlayer} from '../../core_private';
-import {StringMapWrapper} from '../facade/collection';
 import {isPresent} from '../facade/lang';
 
-import {getDOM} from './dom_adapter';
 import {DomAnimatePlayer} from './dom_animate_player';
 
 export class WebAnimationsPlayer implements AnimationPlayer {
   private _subscriptions: Function[] = [];
   private _finished = false;
-  private _initialized = false;
-  private _player: DomAnimatePlayer;
-  private _started: boolean = false;
-  private _duration: number;
-
   public parentPlayer: AnimationPlayer = null;
 
-  constructor(
-      public element: HTMLElement, public keyframes: {[key: string]: string | number}[],
-      public options: {[key: string]: string | number}) {
-    this._duration = <number>options['duration'];
+  constructor(private _player: DomAnimatePlayer, public totalTime: number) {
+    // this is required to make the player startable at a later time
+    this.reset();
+    this._player.onfinish = () => this._onFinish();
   }
 
   private _onFinish() {
@@ -42,46 +33,13 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     }
   }
 
-  init(): void {
-    if (this._initialized) return;
-    this._initialized = true;
-
-    var anyElm = <any>this.element;
-
-    var keyframes = this.keyframes.map(styles => {
-      var formattedKeyframe: {[key: string]: string | number} = {};
-      StringMapWrapper.forEach(styles, (value: string | number, prop: string) => {
-        formattedKeyframe[prop] = value == AUTO_STYLE ? _computeStyle(anyElm, prop) : value;
-      });
-      return formattedKeyframe;
-    });
-
-    this._player = this._triggerWebAnimation(anyElm, keyframes, this.options);
-
-    // this is required so that the player doesn't start to animate right away
-    this.reset();
-    this._player.onfinish = () => this._onFinish();
-  }
-
-  /** @internal */
-  _triggerWebAnimation(elm: any, keyframes: any[], options: any): DomAnimatePlayer {
-    return <DomAnimatePlayer>elm.animate(keyframes, options);
-  }
-
   onDone(fn: Function): void { this._subscriptions.push(fn); }
 
-  play(): void {
-    this.init();
-    this._player.play();
-  }
+  play(): void { this._player.play(); }
 
-  pause(): void {
-    this.init();
-    this._player.pause();
-  }
+  pause(): void { this._player.pause(); }
 
   finish(): void {
-    this.init();
     this._onFinish();
     this._player.finish();
   }
@@ -93,20 +51,12 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     this.play();
   }
 
-  hasStarted(): boolean { return this._started; }
-
   destroy(): void {
     this.reset();
     this._onFinish();
   }
 
-  get totalTime(): number { return this._duration; }
-
-  setPosition(p: number): void { this._player.currentTime = p * this.totalTime; }
+  setPosition(p: any /** TODO #9100 */): void { this._player.currentTime = p * this.totalTime; }
 
   getPosition(): number { return this._player.currentTime / this.totalTime; }
 }
-
-function _computeStyle(element: any, prop: string): string {
-  return getDOM().getComputedStyle(element)[prop];
-}