Revert "fix(animations): blend in all previously transitioned styles …

…into next animation if interrupted (angular#13014)" This reverts commit ea4fc9b.
tbosch · Nov 23, 2016 · 1d7b8ca · 1d7b8ca
1 parent 4c782b6
commit 1d7b8ca
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 39 deletions.
diff --git a/modules/@angular/platform-browser/src/dom/web_animations_driver.ts b/modules/@angular/platform-browser/src/dom/web_animations_driver.ts
@@ -20,8 +20,10 @@ export class WebAnimationsDriver implements AnimationDriver {
       previousPlayers: AnimationPlayer[] = []): WebAnimationsPlayer {
     let formattedSteps: {[key: string]: string | number}[] = [];
     let startingStyleLookup: {[key: string]: string | number} = {};
-    if (isPresent(startingStyles)) {
+    if (isPresent(startingStyles) && startingStyles.styles.length > 0) {
       startingStyleLookup = _populateStyles(startingStyles, {});
+      startingStyleLookup['offset'] = 0;
+      formattedSteps.push(startingStyleLookup);
     }
 
     keyframes.forEach((keyframe: AnimationKeyframe) => {

diff --git a/modules/@angular/platform-browser/src/dom/web_animations_player.ts b/modules/@angular/platform-browser/src/dom/web_animations_player.ts
@@ -69,21 +69,12 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
     const previousStyleProps = Object.keys(this.previousStyles);
     if (previousStyleProps.length) {
-      let startingKeyframe = keyframes[0];
-      let missingStyleProps: string[] = [];
+      let startingKeyframe = findStartingKeyframe(keyframes);
       previousStyleProps.forEach(prop => {
-        if (!isPresent(startingKeyframe[prop])) {
-          missingStyleProps.push(prop);
+        if (isPresent(startingKeyframe[prop])) {
+          startingKeyframe[prop] = this.previousStyles[prop];
         }
-        startingKeyframe[prop] = this.previousStyles[prop];
       });
-
-      if (missingStyleProps.length) {
-        for (let i = 1; i < keyframes.length; i++) {
-          let kf = keyframes[i];
-          missingStyleProps.forEach(prop => { kf[prop] = _computeStyle(this.element, prop); });
-        }
-      }
     }
 
     this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
@@ -185,3 +176,17 @@ function _copyKeyframeStyles(styles: {[style: string]: string | number}):
   });
   return newStyles;
 }
+
+function findStartingKeyframe(keyframes: {[prop: string]: string | number}[]):
+    {[prop: string]: string | number} {
+  let startingKeyframe = keyframes[0];
+  // it's important that we find the LAST keyframe
+  // to ensure that style overidding is final.
+  for (let i = 1; i < keyframes.length; i++) {
+    const kf = keyframes[i];
+    const offset = kf['offset'];
+    if (offset !== 0) break;
+    startingKeyframe = kf;
+  }
+  return startingKeyframe;
+}
diff --git a/modules/@angular/platform-browser/test/dom/web_animations_player_spec.ts b/modules/@angular/platform-browser/test/dom/web_animations_player_spec.ts
@@ -202,32 +202,6 @@ export function main() {
            ]);
          });
 
-      it('should allow previous styles to be merged into the starting keyframe of the animation that were not apart of the animation to begin with',
-         () => {
-           if (!getDOM().supportsWebAnimation()) return;
-
-           const elm = el('<div></div>');
-           document.body.appendChild(elm);
-           elm.style.color = 'rgb(0,0,0)';
-
-           const previousStyles = {color: 'red'};
-           const previousPlayer =
-               new ExtendedWebAnimationsPlayer(elm, [previousStyles, previousStyles], {}, []);
-           previousPlayer.play();
-           previousPlayer.finish();
-
-           const player = new ExtendedWebAnimationsPlayer(
-               elm, [{opacity: '0'}, {opacity: '1'}], {duration: 1000}, [previousPlayer]);
-
-           player.init();
-
-           const data = player.domPlayer.captures['trigger'][0];
-           expect(data['keyframes']).toEqual([
-             {opacity: '0', color: 'red'},
-             {opacity: '1', color: 'rgb(0, 0, 0)'},
-           ]);
-         });
-
       it('should properly calculate the previous styles for the player even when its currently playing',
          () => {
            if (!getDOM().supportsWebAnimation()) return;