diff --git a/packages/animations/src/players/animation_group_player.ts b/packages/animations/src/players/animation_group_player.ts index e67dc48087..07b600cbdf 100644 --- a/packages/animations/src/players/animation_group_player.ts +++ b/packages/animations/src/players/animation_group_player.ts @@ -33,17 +33,17 @@ export class AnimationGroupPlayer implements AnimationPlayer { } else { this.players.forEach(player => { player.onDone(() => { - if (++doneCount >= total) { + if (++doneCount == total) { this._onFinish(); } }); player.onDestroy(() => { - if (++destroyCount >= total) { + if (++destroyCount == total) { this._onDestroy(); } }); player.onStart(() => { - if (++startCount >= total) { + if (++startCount == total) { this._onStart(); } }); @@ -67,9 +67,9 @@ export class AnimationGroupPlayer implements AnimationPlayer { private _onStart() { if (!this.hasStarted()) { + this._started = true; this._onStartFns.forEach(fn => fn()); this._onStartFns = []; - this._started = true; } } diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts index 19c2f022cf..89a5d5acaf 100644 --- a/packages/core/test/animation/animation_query_integration_spec.ts +++ b/packages/core/test/animation/animation_query_integration_spec.ts @@ -2823,6 +2823,96 @@ export function main() { expect(child.log).toEqual(['child-start', 'child-done']); })); + it('should fire and synchronize the start/done callbacks on multiple blocked sub triggers', + fakeAsync(() => { + @Component({ + selector: 'cmp', + animations: [ + trigger( + 'parent1', + [ + transition( + '* => go, * => go-again', + [ + style({opacity: 0}), + animate('1s', style({opacity: 1})), + ]), + ]), + trigger( + 'parent2', + [ + transition( + '* => go, * => go-again', + [ + style({lineHeight: '0px'}), + animate('1s', style({lineHeight: '10px'})), + ]), + ]), + trigger( + 'child1', + [ + transition( + '* => go, * => go-again', + [ + style({width: '0px'}), + animate('1s', style({width: '100px'})), + ]), + ]), + trigger( + 'child2', + [ + transition( + '* => go, * => go-again', + [ + style({height: '0px'}), + animate('1s', style({height: '100px'})), + ]), + ]), + ], + template: ` +