https://angular.io/api/animations/stagger
Real world example: usage with *ngFor
This is currently what I can do
animations: [
trigger('loopAnim', [
state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
transition('void => false', [ /*no transition on first load*/ ]),
transition('* => void', useAnimation(flipOutX, {
params: { timing: 0.5 }
})),
transition('void => *', useAnimation(flipInX, {
params: { timing: 0.5 }
}))
])
]
but I cannot do something, like, say,
animations: [
trigger('loopAnim', [
state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
transition('void => false', [ /*no transition on first load*/ ]),
transition('* => void', useAnimation(flipOutX, {
params: { timing: 0.5 }
})),
transition('void => *',
query(':leave',
stagger(200, useAnimation(flipInX, {
params: { timing: 0.5 }
}))
)
)
])
]
because according to errors, stagger() can only be used inside of query()'s, and using useAnimation() anywhere except the top transition() function will completely bypass any animation and just the element to pop in like default behaviour.
What I would like though:
animations: [
trigger('loopAnim', [
state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
transition('void => false', [ /*no transition on first load*/ ]),
transition('* => void', useAnimation(flipOutX, {
params: { timing: 0.5, stagger: 100 }
})),
transition('void => *', useAnimation(flipInX, {
params: { timing: 0.5, stagger: 200 }
}))
])
]
https://angular.io/api/animations/stagger
Real world example: usage with
*ngForThis is currently what I can do
but I cannot do something, like, say,
because according to errors,
stagger()can only be used inside ofquery()'s, and usinguseAnimation()anywhere except the toptransition()function will completely bypass any animation and just the element to pop in like default behaviour.What I would like though: