I have a unique component that retrieves a list of items from the server and then displays that list using *ngFor in the template.
My goal is to add animation to the list display, with each item animating in one after the other.
I am experimenting with the following code:
import { Component, Input, trigger, state, animate, transition, style } from '@angular/core';
@Component({
selector: 'list-item',
template: ` <li @flyInOut="'in'">{{item}}</li>`,
animations: [
trigger('flyInOut', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(-100%)' }),
animate(100)
]),
transition('* => void', [
animate(100, style({ transform: 'translateX(100%)' }))
])
])
]
})
export class ListItemComponent {
@Input() item: any;
}
and in my list component template this is how I am implementing it:
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
Currently, the entire list is displayed at once. However, I want the items to enter one by one with a smooth animation effect.