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

fix(animations): ensure DOM is cleaned up after multiple @trigger leave animations finish (#20740) 

Closes #20541

PR Close #20740
This commit is contained in:
Matias Niemelä 2017-12-01 11:28:38 -08:00 committed by Igor Minar
parent 6790e02a13
commit b78ada198a
2 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/animations/src/players/animation_group_player.ts
View File

@ -32,7 +32,6 @@ export class AnimationGroupPlayer implements AnimationPlayer {
scheduleMicroTask(() => this._onFinish());
} else {
this.players.forEach(player => {
player.parentPlayer = this;
player.onDone(() => {
if (++doneCount >= total) {
this._onFinish();

60
packages/core/test/animation/animation_integration_spec.ts
View File

@ -2310,6 +2310,66 @@ export function main() {
expect(cmp.event2.triggerName).toBeTruthy('ani2');
}));
it('should handle a leave animation for multiple triggers even if not all triggers have their own leave transition specified',
fakeAsync(() => {
@Component({
selector: 'if-cmp',
template: `
<div *ngIf="exp" @foo @bar>123</div>
`,
animations: [
trigger(
'foo',
[
transition(
':enter',
[
style({opacity: 0}),
animate(1000, style({opacity: 1})),
]),
]),
trigger(
'bar',
[
transition(
':leave',
[
animate(1000, style({opacity: 0})),
]),
])
],
})
class Cmp {
exp: boolean = false;
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const elm = fixture.elementRef.nativeElement;
const cmp = fixture.componentInstance;
cmp.exp = true;
fixture.detectChanges();
let players = getLog();
expect(players.length).toEqual(1);
let [p1] = players;
p1.finish();
flushMicrotasks();
expect(elm.innerText.trim()).toEqual('123');
resetLog();
cmp.exp = false;
fixture.detectChanges();
players = getLog();
expect(players.length).toEqual(1);
[p1] = players;
p1.finish();
flushMicrotasks();
expect(elm.innerText.trim()).toEqual('');
}));
it('should trigger a state change listener for when the animation changes state from void => state on the host element',
fakeAsync(() => {
@Component({