fix(animations): support multiple state names per state() call (angul…

…ar#15147) Closes angular#14732 Closes angular#15147
SamVerschueren · Mar 18, 2017 · 01fa17a · 01fa17a
1 parent 7788af0
commit 01fa17a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/animations/browser/src/dsl/animation_trigger.ts b/packages/animations/browser/src/dsl/animation_trigger.ts
@@ -86,7 +86,8 @@ class AnimationTriggerVisitor implements AnimationDslVisitor {
   }
 
   visitState(ast: AnimationStateMetadata, context: any): any {
-    context.states[ast.name] = normalizeStyles(ast.styles.styles);
+    const styles = normalizeStyles(ast.styles.styles);
+    ast.name.split(/\s*,\s*/).forEach(name => { context.states[name] = styles; });
   }
 
   visitTransition(ast: AnimationTransitionMetadata, context: any): any {

diff --git a/packages/animations/browser/test/dsl/animation_trigger_spec.ts b/packages/animations/browser/test/dsl/animation_trigger_spec.ts
@@ -51,6 +51,15 @@ export function main() {
         expect(result.transitionFactories.length).toEqual(2);
       });
 
+      it('should allow multiple state values to use the same styles', () => {
+        const result = makeTrigger('name', [
+          state('on, off', style({width: 50})), transition('on => off', animate(1000)),
+          transition('off => on', animate(1000))
+        ]);
+
+        expect(result.states).toEqual({'on': {width: 50}, 'off': {width: 50}});
+      });
+
       it('should find the first transition that matches', () => {
         const result = makeTrigger(
             'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);