honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(animations): make sure animation cancellations respect AUTO style values (#18787) 

Closes #17450

PR Close #18787
This commit is contained in:
Matias Niemelä 2017-08-17 16:35:55 -07:00 committed by Miško Hevery
parent e25f05ae7c
commit 29aa8b33df
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/animations/browser/src/render/transition_animation_engine.ts
View File

@ -961,12 +961,12 @@ export class TransitionAnimationEngine {
const element = player.element;
const previousPlayers =
this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
previousPlayers.forEach(
prevPlayer => { getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer); });
previousPlayers.forEach(prevPlayer => {
getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer);
prevPlayer.destroy();
});
});
allPreviousPlayersMap.forEach(players => players.forEach(player => player.destroy()));
// PRE STAGE: fill the ! styles
const preStylesMap = allPreStyleElements.size ?
cloakAndComputeStyles(
@ -1153,10 +1153,6 @@ export class TransitionAnimationEngine {
private _beforeAnimationBuild(
namespaceId: string, instruction: AnimationTransitionInstruction,
allPreviousPlayersMap: Map<any, TransitionAnimationPlayer[]>) {
// it's important to do this step before destroying the players
// so that the onDone callback below won't fire before this
eraseStyles(instruction.element, instruction.fromStyles);
const triggerName = instruction.triggerName;
const rootElement = instruction.element;
@ -1178,9 +1174,14 @@ export class TransitionAnimationEngine {
if (realPlayer.beforeDestroy) {
realPlayer.beforeDestroy();
}
player.destroy();
players.push(player);
});
});
// this needs to be done so that the PRE/POST styles can be
// computed properly without interfering with the previous animation
eraseStyles(rootElement, instruction.fromStyles);
}
private _buildAnimation(

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

@ -158,9 +158,9 @@ export class WebAnimationsPlayer implements AnimationPlayer {
destroy(): void {
if (!this._destroyed) {
this._destroyed = true;
this._resetDomPlayerState();
this._onFinish();
this._destroyed = true;
this._onDestroyFns.forEach(fn => fn());
this._onDestroyFns = [];
}

8
packages/animations/browser/test/render/transition_animation_engine_spec.ts
View File

@ -411,8 +411,10 @@ export function main() {
() => {
const engine = makeEngine();
const trig = trigger('something', [
state('x', style({opacity: 0})), state('y', style({opacity: .5})),
state('z', style({opacity: 1})), transition('* => *', animate(1000))
state('x', style({opacity: 0})),
state('y', style({opacity: .5})),
state('z', style({opacity: 1})),
transition('* => *', animate(1000)),
]);
registerTrigger(element, engine, trig);
@ -428,7 +430,7 @@ export function main() {
const player2 = engine.players[0];
expect(parseFloat(element.style.opacity)).toEqual(.5);
expect(parseFloat(element.style.opacity)).not.toEqual(.5);
player2.finish();
expect(parseFloat(element.style.opacity)).toEqual(1);