fix(animations): make sure easing values are applied to an empty anim…

…ate() step (#15174) Closes #15115 Closes #15174
angular · Mar 15, 2017 · 62d5543 · 62d5543
1 parent f1b33ab
commit 62d5543
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/animations/browser/src/dsl/animation_timeline_visitor.ts b/packages/animations/browser/src/dsl/animation_timeline_visitor.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AUTO_STYLE, AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence, ɵStyleData} from '@angular/animations';
+import {AUTO_STYLE, AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence, style, ɵStyleData} from '@angular/animations';
 
 import {copyStyles, normalizeStyles, parseTimeExpression} from '../util';
 
@@ -241,9 +241,13 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
     if (astType == AnimationMetadataType.KeyframeSequence) {
       this.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>ast.styles, context);
     } else {
+      let styleAst = ast.styles as AnimationStyleMetadata;
+      if (!styleAst && timings.easing) {
+        styleAst = style({easing: timings.easing});
+      }
       context.incrementTime(timings.duration);
-      if (astType == AnimationMetadataType.Style) {
-        this.visitStyle(<AnimationStyleMetadata>ast.styles, context);
+      if (styleAst) {
+        this.visitStyle(styleAst, context);
       }
     }
 

diff --git a/packages/animations/browser/test/dsl/animation_spec.ts b/packages/animations/browser/test/dsl/animation_spec.ts
@@ -615,6 +615,21 @@ export function main() {
                {background: 'red', height: AUTO_STYLE, offset: 1}
              ]);
            });
+
+        it('should produce an animation from start to end between the to and from styles if there are animate steps in between with an easing value',
+           () => {
+             const steps: AnimationMetadata[] = [animate('1s ease-out')];
+
+             const fromStyles: ɵStyleData[] = [{background: 'blue'}];
+
+             const toStyles: ɵStyleData[] = [{background: 'red'}];
+
+             const players = invokeAnimationSequence(steps, fromStyles, toStyles);
+             expect(players[0].keyframes).toEqual([
+               {background: 'blue', offset: 0},
+               {background: 'red', easing: 'ease-out', offset: 1}
+             ]);
+           });
       });
     });
   });