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

refactor(animations): always remove elements right away unless they have a leave animation

Browse Source
This commit is contained in:
Matias Niemelä
2017-02-23 12:52:41 -08:00
committed by Igor Minar
parent 835e18709d
commit 187f7b68f2
4 changed files with 102 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
modules/@angular/platform-browser/animations/src/render/dom_animation_engine.ts
View File

@ -69,8 +69,21 @@ export class DomAnimationEngine {
}
onRemove(element: any, domFn: () => any): void {
element[MARKED_FOR_REMOVAL] = true;
this._queuedRemovals.set(element, domFn);
let lookupRef = this._elementTriggerStates.get(element);
if (lookupRef) {
const possibleTriggers = Object.keys(lookupRef);
const hasRemoval = possibleTriggers.some(triggerName => {
const oldValue = lookupRef[triggerName];
const instruction = this._triggers[triggerName].matchTransition(oldValue, 'void');
return !!instruction;
});
if (hasRemoval) {
element[MARKED_FOR_REMOVAL] = true;
this._queuedRemovals.set(element, domFn);
return;
}
}
domFn();
}
setProperty(element: any, property: string, value: any): void {

3
modules/@angular/platform-browser/animations/src/render/web_animations/web_animations_player.ts
View File

@ -90,7 +90,8 @@ export class WebAnimationsPlayer implements AnimationPlayer {
}
this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
this._finalKeyframe = _copyKeyframeStyles(keyframes[keyframes.length - 1]);
this._finalKeyframe =
keyframes.length ? _copyKeyframeStyles(keyframes[keyframes.length - 1]) : {};
// this is required so that the player doesn't start to animate right away
this._resetDomPlayerState();

50
modules/@angular/platform-browser/animations/test/engine/animation_engine_spec.ts → modules/@angular/platform-browser/animations/test/engine/dom_animation_engine_spec.ts
View File

@ -626,56 +626,6 @@ export function main() {
expect(container.contains(child1)).toBe(true);
expect(container.contains(child2)).toBe(true);
});
it('should queue up all `remove` DOM operations until all animations are complete', () => {
let container = <any>el('<div></div>');
let targetContainer = <any>el('<div></div>');
let otherContainer = <any>el('<div></div>');
let child1 = <any>el('<div></div>');
let child2 = <any>el('<div></div>');
container.appendChild(targetContainer);
container.appendChild(otherContainer);
targetContainer.appendChild(child1);
targetContainer.appendChild(child2);
/*----------------*
container
/ \
target other
/ \
c1 c2
*----------------*/
expect(container.contains(otherContainer)).toBe(true);
const engine = makeEngine();
engine.onRemove(child1, () => targetContainer.removeChild(child1));
engine.onRemove(child2, () => targetContainer.removeChild(child2));
engine.onRemove(otherContainer, () => container.removeChild(otherContainer));
expect(container.contains(child1)).toBe(true);
expect(container.contains(child2)).toBe(true);
expect(container.contains(otherContainer)).toBe(true);
const instructions =
buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]);
const player = engine.animateTimeline(targetContainer, instructions);
expect(container.contains(child1)).toBe(true);
expect(container.contains(child2)).toBe(true);
expect(container.contains(otherContainer)).toBe(true);
engine.flush();
expect(container.contains(child1)).toBe(true);
expect(container.contains(child2)).toBe(true);
expect(container.contains(otherContainer)).toBe(false);
player.finish();
expect(container.contains(child1)).toBe(false);
expect(container.contains(child2)).toBe(false);
expect(container.contains(otherContainer)).toBe(false);
});
});
});
}