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

Closes #9396
Closes #12337

PR Close #19672

Author: matsko

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

@@ -55,16 +55,27 @@ function parseAnimationAlias(alias: string, errors: string[]): string {
   }
 }
 
+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;

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

@@ -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):
@@ -1413,13 +1414,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) {

packages/animations/src/animation_metadata.ts

@@ -257,6 +257,11 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
  the
  * trigger is bound to (in the form of `[@triggerName]="expression"`.
  *
+ * Animation trigger bindings strigify values and then match the previous and current values against
+ * any linked transitions. If a boolean value is provided into the trigger binding then it will both
+ * be represented as `1` or `true` and `0` or `false` for a true and false boolean values
+ * respectively.
+ *
  * ### Usage
  *
  * `trigger` will create an animation trigger reference based on the provided `name` value. The
@@ -734,6 +739,21 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
  * ])
  * ```
  *
+ * ### Boolean values
+ * if a trigger binding value is a boolean value then it can be matched using a transition
+ * expression that compares `true` and `false` or `1` and `0`.
+ *
+ * ```
+ * // in the template
+ * <div [@openClose]="open ? true : false">...</div>
+ *
+ * // in the component metadata
+ * trigger('openClose', [
+ *   state('true', style({ height: '*' })),
+ *   state('false', style({ height: '0px' })),
+ *   transition('false <=> true', animate(500))
+ * ])
+ * ```
  * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
  *
  * @experimental Animation support is experimental.

packages/core/test/animation/animation_integration_spec.ts

@@ -475,6 +475,103 @@ export function main() {
         ]);
       });
 
+      it('should understand boolean values as `true` and `false` for transition animations', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      'true => false',
+                      [
+                        style({opacity: 0}),
+                        animate(1234, style({opacity: 1})),
+                      ]),
+                  transition(
+                      'false => true',
+                      [
+                        style({opacity: 1}),
+                        animate(4567, style({opacity: 0})),
+                      ])
+                ]),
+          ]
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = true;
+        fixture.detectChanges();
+
+        cmp.exp = false;
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        let [player] = players;
+
+        expect(player.duration).toEqual(1234);
+      });
+
+      it('should understand boolean values as `true` and `false` for transition animations and apply the corresponding state() value',
+         () => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     state('true', style({color: 'red'})),
+                     state('false', style({color: 'blue'})),
+                     transition(
+                         'true <=> false',
+                         [
+                           animate(1000, style({color: 'gold'})),
+                           animate(1000),
+                         ]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             exp: any = false;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = false;
+           fixture.detectChanges();
+
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           let [player] = players;
+
+           expect(player.keyframes).toEqual([
+             {color: 'blue', offset: 0},
+             {color: 'gold', offset: 0.5},
+             {color: 'red', offset: 1},
+           ]);
+         });
+
       it('should not throw an error if a trigger with the same name exists in separate components',
          () => {
            @Component({selector: 'cmp1', template: '...', animations: [trigger('trig', [])]})