fix(animations): make sure easing values are applied to an empty animate() step (#15174)
Closes #15115 Closes #15174
This commit is contained in:
parent
f1b33ab7b1
commit
62d5543b01
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue