У меня есть компонент, который извлекает список элементов с сервера, а затем отображает этот список, используя * ngFor в шаблоне.
Я хочу, чтобы список отображался с некоторой анимацией, но один за другим. Я имею в виду, что каждый элемент списка должен анимироваться после другого.
Я пробую что-то вроде этого:
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;
}
и в моем шаблоне компонента списка я использую его как:
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
То, что он делает, отображает весь список сразу. Я хочу, чтобы элементы вводились один за другим с некоторой анимацией.