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

fix(animations): properly support boolean-based transitions and state changes (#19279)

Browse Source 
Closes #9396
Closes #12337

PR Close #19279
This commit is contained in:
Matias Niemelä
2017-09-19 14:22:22 -07:00
committed by Chuck Jazdzewski
parent b1ca5d4ddf
commit c4704c8abc
4 changed files with 146 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/animations/browser/src/dsl/animation_transition_expr.ts
View File

@ -65,16 +65,27 @@ function parseAnimationAlias(alias: string, errors: string[]): string|Transition
}
}
const TRUE_BOOLEAN_VALUES = new Set<string>();
TRUE_BOOLEAN_VALUES.add('true');
TRUE_BOOLEAN_VALUES.add('1');
const FALSE_BOOLEAN_VALUES = new Set<string>();
FALSE_BOOLEAN_VALUES.add('false');
FALSE_BOOLEAN_VALUES.add('0');
function makeLambdaFromStates(lhs: string, rhs: string): TransitionMatcherFn {
const LHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(lhs) || FALSE_BOOLEAN_VALUES.has(lhs);
const RHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(rhs) || FALSE_BOOLEAN_VALUES.has(rhs);
return (fromState: any, toState: any): boolean => {
let lhsMatch = lhs == ANY_STATE || lhs == fromState;
let rhsMatch = rhs == ANY_STATE || rhs == toState;
if (!lhsMatch && typeof fromState === 'boolean') {
lhsMatch = fromState ? lhs === 'true' : lhs === 'false';
if (!lhsMatch && LHS_MATCH_BOOLEAN && typeof fromState === 'boolean') {
lhsMatch = fromState ? TRUE_BOOLEAN_VALUES.has(lhs) : FALSE_BOOLEAN_VALUES.has(lhs);
}
if (!rhsMatch && typeof toState === 'boolean') {
rhsMatch = toState ? rhs === 'true' : rhs === 'false';
if (!rhsMatch && RHS_MATCH_BOOLEAN && typeof toState === 'boolean') {
rhsMatch = toState ? TRUE_BOOLEAN_VALUES.has(rhs) : FALSE_BOOLEAN_VALUES.has(rhs);
}
return lhsMatch && rhsMatch;

27
packages/animations/browser/src/render/transition_animation_engine.ts
View File

@ -119,18 +119,18 @@ export class AnimationTransitionNamespace {
listen(element: any, name: string, phase: string, callback: (event: any) => boolean): () => any {
if (!this._triggers.hasOwnProperty(name)) {
throw new Error(
`Unable to listen on the animation trigger event "${phase}" because the animation trigger "${name}" doesn\'t exist!`);
throw new Error(`Unable to listen on the animation trigger event "${
phase}" because the animation trigger "${name}" doesn\'t exist!`);
}
if (phase == null || phase.length == 0) {
throw new Error(
`Unable to listen on the animation trigger "${name}" because the provided event is undefined!`);
throw new Error(`Unable to listen on the animation trigger "${
name}" because the provided event is undefined!`);
}
if (!isTriggerEventValid(phase)) {
throw new Error(
`The provided animation trigger event "${phase}" for the animation trigger "${name}" is not supported!`);
throw new Error(`The provided animation trigger event "${phase}" for the animation trigger "${
name}" is not supported!`);
}
const listeners = getOrSetAsInMap(this._elementListeners, element, []);
@ -802,7 +802,8 @@ export class TransitionAnimationEngine {
reportError(errors: string[]) {
throw new Error(
`Unable to process animations due to the following failed trigger transitions\n ${errors.join("\n")}`);
`Unable to process animations due to the following failed trigger transitions\n ${
errors.join('\n')}`);
}
private _flushAnimations(cleanupFns: Function[], microtaskId: number):
@ -1411,13 +1412,11 @@ function deleteOrUnsetInMap(map: Map<any, any[]>| {[key: string]: any}, key: any
return currentValues;
}
function normalizeTriggerValue(value: any): string {
switch (typeof value) {
case 'boolean':
return value ? '1' : '0';
default:
return value != null ? value.toString() : null;
}
function normalizeTriggerValue(value: any): any {
// we use `!= null` here because it's the most simple
// way to test against a "falsy" value without mixing
// in empty strings or a zero value. DO NOT OPTIMIZE.
return value != null ? value : null;
}
function isElementNode(node: any) {