cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): ensure enter/leave cancellations work (#15323)

Browse Source 
Closes #15315
Closes #15323

PR Close #15323
This commit is contained in:
Matias Niemelä
2017-03-20 14:28:10 -07:00
committed by Miško Hevery
parent de3d2eeeba
commit 9bf2fb4a74
4 changed files with 130 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/animations/browser/src/render/dom_animation_engine.ts
View File

@ -217,9 +217,9 @@ export class DomAnimationEngine {
// we first run this so that the previous animation player
// data can be passed into the successive animation players
let totalTime = 0;
const players = instruction.timelines.map(timelineInstruction => {
const players = instruction.timelines.map((timelineInstruction, i) => {
totalTime = Math.max(totalTime, timelineInstruction.totalTime);
return this._buildPlayer(element, timelineInstruction, previousPlayers);
return this._buildPlayer(element, timelineInstruction, previousPlayers, i);
});
previousPlayers.forEach(previousPlayer => previousPlayer.destroy());
@ -253,8 +253,8 @@ export class DomAnimationEngine {
public animateTimeline(
element: any, instructions: AnimationTimelineInstruction[],
previousPlayers: AnimationPlayer[] = []): AnimationPlayer {
const players = instructions.map(instruction => {
const player = this._buildPlayer(element, instruction, previousPlayers);
const players = instructions.map((instruction, i) => {
const player = this._buildPlayer(element, instruction, previousPlayers, i);
player.onDestroy(
() => { deleteFromArrayMap(this._activeElementAnimations, element, player); });
player.init();
@ -266,8 +266,14 @@ export class DomAnimationEngine {
}
private _buildPlayer(
element: any, instruction: AnimationTimelineInstruction,
previousPlayers: AnimationPlayer[]): AnimationPlayer {
element: any, instruction: AnimationTimelineInstruction, previousPlayers: AnimationPlayer[],
index: number = 0): AnimationPlayer {
// only the very first animation can absorb the previous styles. This
// is here to prevent the an overlap situation where a group animation
// absorbs previous styles multiple times for the same element.
if (index && previousPlayers.length) {
previousPlayers = [];
}
return this._driver.animate(
element, this._normalizeKeyframes(instruction.keyframes), instruction.duration,
instruction.delay, instruction.easing, previousPlayers);

4
packages/animations/browser/src/render/web_animations/web_animations_player.ts
View File

@ -71,7 +71,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
let startingKeyframe = keyframes[0];
let missingStyleProps: string[] = [];
previousStyleProps.forEach(prop => {
if (startingKeyframe[prop] != null) {
if (!startingKeyframe.hasOwnProperty(prop)) {
missingStyleProps.push(prop);
}
startingKeyframe[prop] = this.previousStyles[prop];
@ -102,7 +102,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
_triggerWebAnimation(element: any, keyframes: any[], options: any): DOMAnimation {
// jscompiler doesn't seem to know animate is a native property because it's not fully
// supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
return <DOMAnimation>element['animate'](keyframes, options);
return element['animate'](keyframes, options) as DOMAnimation;
}
get domPlayer() { return this._player; }