fix(animations): make sure easing values are applied to an empty animate() step (#15174)

Closes #15115
Closes #15174
This commit is contained in:
Matias Niemelä 2017-03-15 15:31:06 -07:00 committed by Chuck Jazdzewski
parent f1b33ab7b1
commit 62d5543b01
2 changed files with 22 additions and 3 deletions

View File

@ -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);
}
}

View File

@ -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}
]);
});
});
});
});