fix(animations): make sure style calculations are not computed too early (#15540)

Closes #15507

packages/animations/browser/src/private_export.ts

@@ -13,3 +13,4 @@ export {NoopAnimationDriver as ɵNoopAnimationDriver} from './render/animation_d
 export {DomAnimationEngine as ɵDomAnimationEngine} from './render/dom_animation_engine';
 export {NoopAnimationEngine as ɵNoopAnimationEngine} from './render/noop_animation_engine';
 export {WebAnimationsDriver as ɵWebAnimationsDriver, supportsWebAnimations as ɵsupportsWebAnimations} from './render/web_animations/web_animations_driver';
+export {WebAnimationsPlayer as ɵWebAnimationsPlayer} from './render/web_animations/web_animations_player';

packages/animations/browser/src/render/dom_animation_engine.ts

@@ -259,8 +259,6 @@ export class DomAnimationEngine {
       const player = this._buildPlayer(element, instruction, previousPlayers, i);
       player.onDestroy(
           () => { deleteFromArrayMap(this._activeElementAnimations, element, player); });
-      player.init();
-
       this._markPlayerAsActive(element, player);
       return player;
     });
@@ -354,6 +352,7 @@ export class DomAnimationEngine {
       // in the event that an animation throws an error then we do
       // not want to re-run animations on any previous animations
       // if they have already been kicked off beforehand
+      player.init();
       if (!player.hasStarted()) {
         player.play();
       }

packages/animations/browser/test/engine/dom_animation_engine_spec.ts

@@ -87,6 +87,22 @@ export function main() {
         expect(engine.queuedPlayers.pop() instanceof NoopAnimationPlayer).toBe(true);
       });
 
+      it('should not initialize the animation until the engine has been flushed', () => {
+        const engine = makeEngine();
+        engine.registerTrigger(trigger(
+            'trig', [transition('* => something', [animate(1000, style({color: 'gold'}))])]));
+
+        engine.setProperty(element, 'trig', 'something');
+        const player = engine.queuedPlayers.pop() as MockAnimationPlayer;
+
+        let initialized = false;
+        player.onInit(() => initialized = true);
+
+        expect(initialized).toBe(false);
+        engine.flush();
+        expect(initialized).toBe(true);
+      });
+
       it('should not queue an animation if the property value has not changed at all', () => {
         const engine = makeEngine();
 

packages/animations/browser/testing/src/mock_animation_driver.ts

@@ -31,6 +31,7 @@ export class MockAnimationDriver implements AnimationDriver {
 export class MockAnimationPlayer extends NoopAnimationPlayer {
   private __finished = false;
   public previousStyles: {[key: string]: string | number} = {};
+  private _onInitFns: (() => any)[] = [];
 
   constructor(
       public element: any, public keyframes: {[key: string]: string | number}[],
@@ -45,6 +46,16 @@ export class MockAnimationPlayer extends NoopAnimationPlayer {
     });
   }
 
+  /* @internal */
+  onInit(fn: () => any) { this._onInitFns.push(fn); }
+
+  /* @internal */
+  init() {
+    super.init();
+    this._onInitFns.forEach(fn => fn());
+    this._onInitFns = [];
+  }
+
   finish(): void {
     super.finish();
     this.__finished = true;