Skip to content

Commit bb1d4ff

Browse files
dario-piotrowiczalxhub
dario-piotrowicz
authored and
alxhub
committed
fix(animations): don't consume instructions for animateChild (#44357)
TODO: Fill body commit if PR gets accepted resolves #41483 resolves #30693 PR Close #44357
1 parent d8b6adb commit bb1d4ff

4 files changed

Lines changed: 196 additions & 113 deletions

File tree

‎packages/animations/browser/src/dsl/animation_timeline_builder.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export class AnimationTimelineBuilderVisitor implements AstVisitor {
154154
}
155155

156156
visitAnimateChild(ast: AnimateChildAst, context: AnimationTimelineContext): any {
157-
const elementInstructions = context.subInstructions.consume(context.element);
157+
const elementInstructions = context.subInstructions.get(context.element);
158158
if (elementInstructions) {
159159
const innerContext = context.createSubContext(ast.options);
160160
const startTime = context.currentTimeline.currentTime;

‎packages/animations/browser/src/dsl/element_instruction_map.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,8 @@ import {AnimationTimelineInstruction} from './animation_timeline_instruction';
1010
export class ElementInstructionMap {
1111
private _map = new Map<any, AnimationTimelineInstruction[]>();
1212

13-
consume(element: any): AnimationTimelineInstruction[] {
14-
let instructions = this._map.get(element);
15-
if (instructions) {
16-
this._map.delete(element);
17-
} else {
18-
instructions = [];
19-
}
20-
return instructions;
13+
get(element: any): AnimationTimelineInstruction[] {
14+
return this._map.get(element) || [];
2115
}
2216

2317
append(element: any, instructions: AnimationTimelineInstruction[]) {

‎packages/core/test/animation/animation_integration_spec.ts‎

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -979,9 +979,9 @@ describe('animation tests', function() {
979979
expect(fixture.nativeElement.children.length).toBe(1);
980980

981981
engine.flush();
982-
expect(getLog().length).toBe(1);
982+
expect(getLog().length).toBe(2);
983983

984-
const player = getLog()[0];
984+
const player = getLog()[1];
985985
expect(player.keyframes).toEqual([
986986
{opacity: '1', offset: 0},
987987
{opacity: '0', offset: 1},
@@ -3007,18 +3007,25 @@ describe('animation tests', function() {
30073007
cmp.log = [];
30083008

30093009
const players = getLog();
3010-
expect(players.length).toEqual(3);
3011-
const [p1, p2, p3] = players;
3010+
expect(players.length).toEqual(4);
30123011

3013-
p1.finish();
3012+
// players:
3013+
// - _scp (skipped child player): player for the child animation
3014+
// - pp1 (parent player 1): player for parent animation (from 0px to 100px)
3015+
// - pcp (parent child player):
3016+
// player for child animation executed by parent via query and animateChild
3017+
// - pp2 (parent player 2): player for parent animation (from 100px to 0px)
3018+
const [_scp, pp1, pcp, pp2] = players;
3019+
3020+
pp1.finish();
30143021
flushMicrotasks();
30153022
expect(cmp.log).toEqual([]);
30163023

3017-
p2.finish();
3024+
pcp.finish();
30183025
flushMicrotasks();
30193026
expect(cmp.log).toEqual([]);
30203027

3021-
p3.finish();
3028+
pp2.finish();
30223029
flushMicrotasks();
30233030
expect(cmp.log).toEqual(['parent-done', 'child-done']);
30243031
}));
@@ -3080,33 +3087,45 @@ describe('animation tests', function() {
30803087
cmp.log = [];
30813088

30823089
const players = getLog();
3083-
// 1 + 4 + 4 = 9 players
3084-
expect(players.length).toEqual(9);
3085-
3086-
const [pA, pq1a, pq1b, pq1c, pq1d, pq2a, pq2b, pq2c, pq2d] = getLog();
3087-
pA.finish();
3088-
pq1a.finish();
3089-
pq1b.finish();
3090-
pq1c.finish();
3091-
pq1d.finish();
3090+
expect(players.length).toEqual(13);
3091+
3092+
// players:
3093+
// - _sc1p, _sc2p, _sc3p, _sc4p (skipped child n (1 to 4) players):
3094+
// players for the children animations
3095+
// - pp1 (parent player 1): player for parent animation (from opacity 0 to opacity 1)
3096+
// - pc1p1, pc2p1, pc3p1, pc4p1 (parent child n (1 to 4) player 1):
3097+
// players for children animations executed by parent via query and animate
3098+
// (from opacity 0 to opacity 1)
3099+
// - pc1p2, pc2p2, pc3p2, pc4p2 (parent child n (1 to 4) player 2):
3100+
// players for children animations executed by parent via query and animateChild
3101+
const [_sc1p, _sc2p, _sc3p, _sc4p, pp1, pc1p1, pc2p1, pc3p1, pc4p1, pc1p2, pc2p2, pc3p2, pc4p2] =
3102+
getLog();
3103+
pp1.finish();
3104+
pc1p1.finish();
3105+
pc2p1.finish();
3106+
pc3p1.finish();
3107+
pc4p1.finish();
30923108
flushMicrotasks();
30933109

30943110
expect(cmp.log).toEqual([]);
3095-
pq2a.finish();
3096-
pq2b.finish();
3097-
pq2c.finish();
3098-
pq2d.finish();
3111+
pc1p2.finish();
3112+
pc2p2.finish();
3113+
pc3p2.finish();
3114+
pc4p2.finish();
30993115
flushMicrotasks();
31003116

31013117
expect(cmp.log).toEqual(['all-done', 'c-0-done', 'c-1-done', 'c-2-done', 'c-3-done']);
31023118

3103-
expect(cmp.events['c-0'].totalTime).toEqual(4100); // 1000 + 1000 + 1800 + 300
3119+
expect(cmp.events['all'].totalTime).toEqual(4100); // 1000 + 1000 + 1800 + 300
3120+
expect(cmp.events['all'].element.innerText.trim().replaceAll('\n', ' '))
3121+
.toEqual('0 1 2 3');
3122+
expect(cmp.events['c-0'].totalTime).toEqual(1500);
31043123
expect(cmp.events['c-0'].element.innerText.trim()).toEqual('0');
3105-
expect(cmp.events['c-1'].totalTime).toEqual(4100);
3124+
expect(cmp.events['c-1'].totalTime).toEqual(1500);
31063125
expect(cmp.events['c-1'].element.innerText.trim()).toEqual('1');
3107-
expect(cmp.events['c-2'].totalTime).toEqual(4100);
3126+
expect(cmp.events['c-2'].totalTime).toEqual(1500);
31083127
expect(cmp.events['c-2'].element.innerText.trim()).toEqual('2');
3109-
expect(cmp.events['c-3'].totalTime).toEqual(4100);
3128+
expect(cmp.events['c-3'].totalTime).toEqual(1500);
31103129
expect(cmp.events['c-3'].element.innerText.trim()).toEqual('3');
31113130
}));
31123131
});

0 commit comments

Comments
 (0)