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

fix(animations): always render end-state styles for orphaned DOM nodes (#24236)

Browse Source 
This patch ensures that any destination animation styling (state values)
are always applied even if the DOM node is not apart of the DOM.

PR Close #24236
This commit is contained in:
Matias Niemelä
2018-05-31 14:51:30 -07:00
committed by Miško Hevery
parent 8aa70c2477
commit dc4a3d00d0
3 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -740,10 +740,10 @@ export class TransitionAnimationEngine {
private _buildInstruction(
entry: QueueInstruction, subTimelines: ElementInstructionMap, enterClassName: string,
leaveClassName: string) {
leaveClassName: string, skipBuildAst?: boolean) {
return entry.transition.build(
this.driver, entry.element, entry.fromState.value, entry.toState.value, enterClassName,
leaveClassName, entry.fromState.options, entry.toState.options, subTimelines);
leaveClassName, entry.fromState.options, entry.toState.options, subTimelines, skipBuildAst);
}
destroyInnerAnimations(containerElement: any) {
@ -962,17 +962,24 @@ export class TransitionAnimationEngine {
}
}
if (!bodyNode || !this.driver.containsElement(bodyNode, element)) {
player.destroy();
const nodeIsOrphaned = !bodyNode || !this.driver.containsElement(bodyNode, element);
const leaveClassName = leaveNodeMapIds.get(element) !;
const enterClassName = enterNodeMapIds.get(element) !;
const instruction = this._buildInstruction(
entry, subTimelines, enterClassName, leaveClassName, nodeIsOrphaned) !;
if (instruction.errors && instruction.errors.length) {
erroneousTransitions.push(instruction);
return;
}
const leaveClassName = leaveNodeMapIds.get(element) !;
const enterClassName = enterNodeMapIds.get(element) !;
const instruction =
this._buildInstruction(entry, subTimelines, enterClassName, leaveClassName) !;
if (instruction.errors && instruction.errors.length) {
erroneousTransitions.push(instruction);
// even though the element may not be apart of the DOM, it may
// still be added at a later point (due to the mechanics of content
// projection and/or dynamic component insertion) therefore it's
// important we still style the element.
if (nodeIsOrphaned) {
player.onStart(() => eraseStyles(element, instruction.fromStyles));
player.onDestroy(() => setStyles(element, instruction.toStyles));
skippedPlayers.push(player);
return;
}