fix(animations): repair flicker issues with WA polyfill (#16937)

Fixes #16919
Fixes #16918

packages/animations/browser/src/dsl/style_normalization/web_animations_style_normalizer.ts

@@ -5,6 +5,8 @@
  * 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 {dashCaseToCamelCase} from '../../util';
+
 import {AnimationStyleNormalizer} from './animation_style_normalizer';
 
 export class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
@@ -41,8 +43,3 @@ function makeBooleanMap(keys: string[]): {[key: string]: boolean} {
   keys.forEach(key => map[key] = true);
   return map;
 }
-
-const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
-export function dashCaseToCamelCase(input: string): string {
-  return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
-}

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

@@ -997,9 +997,8 @@ export class TransitionAnimationEngine {
     });
 
     allConsumedElements.forEach(element => addClass(element, NG_ANIMATING_CLASSNAME));
-
     const player = optimizeGroupPlayer(allNewPlayers);
-    player.onDone(() => {
+    player.onDestroy(() => {
       allConsumedElements.forEach(element => removeClass(element, NG_ANIMATING_CLASSNAME));
       setStyles(rootElement, instruction.toStyles);
     });

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

@@ -53,6 +53,11 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   }
 
   init(): void {
+    this._buildPlayer();
+    this._preparePlayerBeforeStart();
+  }
+
+  private _buildPlayer(): void {
     if (this._initialized) return;
     this._initialized = true;
 
@@ -82,14 +87,16 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
     this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
     this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {};
+    this._player.addEventListener('finish', () => this._onFinish());
+  }
 
+  private _preparePlayerBeforeStart() {
     // this is required so that the player doesn't start to animate right away
     if (this._delay) {
       this._resetDomPlayerState();
     } else {
       this._player.pause();
     }
-    this._player.addEventListener('finish', () => this._onFinish());
   }
 
   /** @internal */
@@ -108,7 +115,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
 
   play(): void {
-    this.init();
+    this._buildPlayer();
     if (!this.hasStarted()) {
       this._onStartFns.forEach(fn => fn());
       this._onStartFns = [];

packages/animations/browser/src/util.ts

@@ -123,16 +123,18 @@ export function copyStyles(
 
 export function setStyles(element: any, styles: ɵStyleData) {
   if (element['style']) {
-    Object.keys(styles).forEach(prop => element.style[prop] = styles[prop]);
+    Object.keys(styles).forEach(prop => {
+      const camelProp = dashCaseToCamelCase(prop);
+      element.style[camelProp] = styles[prop];
+    });
   }
 }
 
 export function eraseStyles(element: any, styles: ɵStyleData) {
   if (element['style']) {
     Object.keys(styles).forEach(prop => {
-      // IE requires '' instead of null
-      // see https://github.com/angular/angular/issues/7916
-      element.style[prop] = '';
+      const camelProp = dashCaseToCamelCase(prop);
+      element.style[camelProp] = '';
     });
   }
 }
@@ -206,3 +208,8 @@ export function mergeAnimationOptions(
   }
   return destination;
 }
+
+const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
+export function dashCaseToCamelCase(input: string): string {
+  return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
+}