fix(animations): support persisting dynamic styles within animation states (#18468)

Closes #18423
Closes #17505

packages/animations/browser/src/dsl/animation_transition_factory.ts

@@ -9,38 +9,51 @@ import {AnimationOptions, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../render/animation_driver';
 import {getOrSetAsInMap} from '../render/shared';
-import {iteratorToArray, mergeAnimationOptions} from '../util';
+import {copyObj, interpolateParams, iteratorToArray, mergeAnimationOptions} from '../util';
 
-import {TransitionAst} from './animation_ast';
+import {StyleAst, TransitionAst} from './animation_ast';
 import {buildAnimationTimelines} from './animation_timeline_builder';
 import {TransitionMatcherFn} from './animation_transition_expr';
 import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
 import {ElementInstructionMap} from './element_instruction_map';
 
+const EMPTY_OBJECT = {};
+
 export class AnimationTransitionFactory {
   constructor(
       private _triggerName: string, public ast: TransitionAst,
-      private _stateStyles: {[stateName: string]: ɵStyleData}) {}
+      private _stateStyles: {[stateName: string]: AnimationStateStyles}) {}
 
   match(currentState: any, nextState: any): boolean {
     return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState);
   }
 
+  buildStyles(stateName: string, params: {[key: string]: any}, errors: any[]) {
+    const backupStateStyler = this._stateStyles['*'];
+    const stateStyler = this._stateStyles[stateName];
+    const backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {};
+    return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles;
+  }
+
   build(
       driver: AnimationDriver, element: any, currentState: any, nextState: any,
-      options?: AnimationOptions,
+      currentOptions?: AnimationOptions, nextOptions?: AnimationOptions,
       subInstructions?: ElementInstructionMap): AnimationTransitionInstruction {
-    const animationOptions = mergeAnimationOptions(this.ast.options || {}, options || {});
+    const errors: any[] = [];
+
+    const transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT;
+    const currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT;
+    const currentStateStyles = this.buildStyles(currentState, currentAnimationParams, errors);
+    const nextAnimationParams = nextOptions && nextOptions.params || EMPTY_OBJECT;
+    const nextStateStyles = this.buildStyles(nextState, nextAnimationParams, errors);
 
-    const backupStateStyles = this._stateStyles['*'] || {};
-    const currentStateStyles = this._stateStyles[currentState] || backupStateStyles;
-    const nextStateStyles = this._stateStyles[nextState] || backupStateStyles;
     const queriedElements = new Set<any>();
     const preStyleMap = new Map<any, {[prop: string]: boolean}>();
     const postStyleMap = new Map<any, {[prop: string]: boolean}>();
     const isRemoval = nextState === 'void';
 
-    const errors: any[] = [];
+    const animationOptions = {params: {...transitionAnimationParams, ...nextAnimationParams}};
+
     const timelines = buildAnimationTimelines(
         driver, element, this.ast.animation, currentStateStyles, nextStateStyles, animationOptions,
         subInstructions, errors);
@@ -75,3 +88,31 @@ function oneOrMoreTransitionsMatch(
     matchFns: TransitionMatcherFn[], currentState: any, nextState: any): boolean {
   return matchFns.some(fn => fn(currentState, nextState));
 }
+
+export class AnimationStateStyles {
+  constructor(private styles: StyleAst, private defaultParams: {[key: string]: any}) {}
+
+  buildStyles(params: {[key: string]: any}, errors: string[]): ɵStyleData {
+    const finalStyles: ɵStyleData = {};
+    const combinedParams = copyObj(this.defaultParams);
+    Object.keys(params).forEach(key => {
+      const value = params[key];
+      if (value != null) {
+        combinedParams[key] = value;
+      }
+    });
+    this.styles.styles.forEach(value => {
+      if (typeof value !== 'string') {
+        const styleObj = value as any;
+        Object.keys(styleObj).forEach(prop => {
+          let val = styleObj[prop];
+          if (val.length > 1) {
+            val = interpolateParams(val, combinedParams, errors);
+          }
+          finalStyles[prop] = val;
+        });
+      }
+    });
+    return finalStyles;
+  }
+}