feat(animations): introduce a wave of new animation features

packages/animations/browser/src/render/web_animations/web_animations_driver.ts

@@ -12,11 +12,15 @@ import {AnimationDriver} from '../animation_driver';
 import {WebAnimationsPlayer} from './web_animations_player';
 
 export class WebAnimationsDriver implements AnimationDriver {
+  computeStyle(element: any, prop: string, defaultValue?: string): string {
+    return (window.getComputedStyle(element) as any)[prop] as string;
+  }
+
   animate(
       element: any, keyframes: ɵStyleData[], duration: number, delay: number, easing: string,
       previousPlayers: AnimationPlayer[] = []): WebAnimationsPlayer {
-    const playerOptions: {[key: string]: string |
-                              number} = {'duration': duration, 'delay': delay, 'fill': 'forwards'};
+    const fill = delay == 0 ? 'both' : 'forwards';
+    const playerOptions: {[key: string]: string | number} = {duration, delay, fill};
 
     // we check for this to avoid having a null|undefined value be present
     // for the easing (which results in an error for certain browsers #9752)

packages/animations/browser/src/render/web_animations/web_animations_player.ts

@@ -5,7 +5,10 @@
  * 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 {AUTO_STYLE, AnimationPlayer} from '@angular/animations';
+import {AnimationPlayer} from '@angular/animations';
+
+import {copyStyles, eraseStyles, setStyles} from '../../util';
+
 import {DOMAnimation} from './dom_animation';
 
 export class WebAnimationsPlayer implements AnimationPlayer {
@@ -24,18 +27,19 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
   public parentPlayer: AnimationPlayer|null = null;
   public previousStyles: {[styleName: string]: string | number};
+  public currentSnapshot: {[styleName: string]: string | number} = {};
 
   constructor(
       public element: any, public keyframes: {[key: string]: string | number}[],
       public options: {[key: string]: string | number},
-      previousPlayers: WebAnimationsPlayer[] = []) {
+      private previousPlayers: WebAnimationsPlayer[] = []) {
     this._duration = <number>options['duration'];
     this._delay = <number>options['delay'] || 0;
     this.time = this._duration + this._delay;
 
     this.previousStyles = {};
     previousPlayers.forEach(player => {
-      let styles = player._captureStyles();
+      let styles = player.currentSnapshot;
       Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
     });
   }
@@ -52,20 +56,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     if (this._initialized) return;
     this._initialized = true;
 
-    const keyframes = this.keyframes.map(styles => {
-      const formattedKeyframe: {[key: string]: string | number} = {};
-      Object.keys(styles).forEach((prop, index) => {
-        let value = styles[prop];
-        if (value == AUTO_STYLE) {
-          value = _computeStyle(this.element, prop);
-        }
-        if (value != undefined) {
-          formattedKeyframe[prop] = value;
-        }
-      });
-      return formattedKeyframe;
-    });
-
+    const keyframes = this.keyframes.map(styles => copyStyles(styles, false));
     const previousStyleProps = Object.keys(this.previousStyles);
     if (previousStyleProps.length) {
       let startingKeyframe = keyframes[0];
@@ -90,11 +81,14 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     }
 
     this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
-    this._finalKeyframe =
-        keyframes.length ? _copyKeyframeStyles(keyframes[keyframes.length - 1]) : {};
+    this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {};
 
     // this is required so that the player doesn't start to animate right away
-    this._resetDomPlayerState();
+    if (this._delay) {
+      this._resetDomPlayerState();
+    } else {
+      this._player.pause();
+    }
     this._player.addEventListener('finish', () => this._onFinish());
   }
 
@@ -168,7 +162,9 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
   getPosition(): number { return this._player.currentTime / this.time; }
 
-  private _captureStyles(): {[prop: string]: string | number} {
+  get totalTime(): number { return this._delay + this._duration; }
+
+  beforeDestroy() {
     const styles: {[key: string]: string | number} = {};
     if (this.hasStarted()) {
       Object.keys(this._finalKeyframe).forEach(prop => {
@@ -178,22 +174,10 @@ export class WebAnimationsPlayer implements AnimationPlayer {
         }
       });
     }
-
-    return styles;
+    this.currentSnapshot = styles;
   }
 }
 
 function _computeStyle(element: any, prop: string): string {
   return (<any>window.getComputedStyle(element))[prop];
 }
-
-function _copyKeyframeStyles(styles: {[style: string]: string | number}):
-    {[style: string]: string | number} {
-  const newStyles: {[style: string]: string | number} = {};
-  Object.keys(styles).forEach(prop => {
-    if (prop != 'offset') {
-      newStyles[prop] = styles[prop];
-    }
-  });
-  return newStyles;
-}