cargdev/angular
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Closes #18423
Closes #17505
This commit is contained in:
Matias Niemelä
2017-08-07 11:40:04 -07:00
committed by Victor Berchet
parent c0c03dc4ba
commit 05472cb21b
11 changed files with 408 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/animations/browser/src/dsl/animation_trigger.ts
View File

@ -7,10 +7,11 @@
*/
import {ɵStyleData} from '@angular/animations';
import {copyStyles} from '../util';
import {copyStyles, interpolateParams} from '../util';
import {SequenceAst, StyleAst, TransitionAst, TriggerAst} from './animation_ast';
import {AnimationStateStyles, AnimationTransitionFactory} from './animation_transition_factory';
import {SequenceAst, TransitionAst, TriggerAst} from './animation_ast';
import {AnimationTransitionFactory} from './animation_transition_factory';
/**
* @experimental Animation support is experimental.
@ -25,16 +26,12 @@ export function buildTrigger(name: string, ast: TriggerAst): AnimationTrigger {
export class AnimationTrigger {
public transitionFactories: AnimationTransitionFactory[] = [];
public fallbackTransition: AnimationTransitionFactory;
public states: {[stateName: string]: ɵStyleData} = {};
public states: {[stateName: string]: AnimationStateStyles} = {};
constructor(public name: string, public ast: TriggerAst) {
ast.states.forEach(ast => {
const obj = this.states[ast.name] = {};
ast.style.styles.forEach(styleTuple => {
if (typeof styleTuple == 'object') {
copyStyles(styleTuple as ɵStyleData, false, obj);
}
});
const defaultParams = (ast.options && ast.options.params) || {};
this.states[ast.name] = new AnimationStateStyles(ast.style, defaultParams);
});
balanceProperties(this.states, 'true', '1');
@ -53,10 +50,15 @@ export class AnimationTrigger {
const entry = this.transitionFactories.find(f => f.match(currentState, nextState));
return entry || null;
}
matchStyles(currentState: any, params: {[key: string]: any}, errors: any[]): ɵStyleData {
return this.fallbackTransition.buildStyles(currentState, params, errors);
}
}
function createFallbackTransition(
triggerName: string, states: {[stateName: string]: ɵStyleData}): AnimationTransitionFactory {
triggerName: string,
states: {[stateName: string]: AnimationStateStyles}): AnimationTransitionFactory {
const matchers = [(fromState: any, toState: any) => true];
const animation = new SequenceAst([]);
const transition = new TransitionAst(matchers, animation);