I have been working on implementing cascaded animations for a list of elements.
Although I successfully applied the state triggers, following the guidelines in the documentation, I am encountering an issue where all element states are being applied simultaneously rather than cascading as desired.
This is what my animation currently looks like:
https://i.sstatic.net/wwTKG.gif
The expected outcome should be something along these lines:
https://i.sstatic.net/t46FY.gif
heroes.component.ts
trigger('flyInOut', [
state('in', style({
transform: 'translateX(0)'
})),
transition('void => in', [
style({transform: 'translateX(-100px)'}),
animate(500)
]),
transition('* => void', [
style({transform: 'translateX(0)'}),
animate(500)
])
])
heroes.component.html
<li *ngFor="let hero of heroes"
(click)="onSelect(hero)"
[class.selected]="hero === selectedHero"
@heroState="hero === selectedHero ? 'active' : 'inactive'"
@flyInOut="'in'"
>
<span class="badge">{{hero.id}}</span> {{hero.name}}
<button class="delete" (click)="delete(hero); $event.stopPropagation()">
x
</button>
</li>