각 항목을 지연시키는 방법 항목 애니메이션

Question

* ngFor의 각 항목을 차례로 지연시킬 수 있습니까?

나는 이런 식으로 뭔가 의미 :

<li *ngFor="let item of items"> //end result like below: 
    <a [@flyIn]="'in'">first item</a> // delay 100ms and animate 
    <a [@flyIn]="'in'">first item</a> // delay 200ms and animate 
    <a [@flyIn]="'in'">first item</a> // delay 300ms and animate 
    <a [@flyIn]="'in'">first item</a> // delay 400ms and animate 
    <a [@flyIn]="'in'">first item</a> // delay 500ms and animate 
</li> 

내가 어떤 간격으로 항목 배열에 항목을 추가 할 필요가 아니면 몇 가지 더 간단 방법이 있습니까?

Answer 1

이제 각도 4.2에서 가능해야합니다 (직접 테스트하지는 않았 음). 다음의 예는 this blog post에서 복사 :

템플릿 코드 :

<div [@races]="races?.length"> 
    <button class="btn btn-primary mb-2" (click)="toggle()">Toggle</button> 
    <div *ngFor="let race of races | slice:0:4"> 
    <h2>{{race.name}}</h2> 
    <p>{{race.startInstant}}</p> 
    </div> 
</div> 

애니메이션 코드 :

trigger('races', [ 
    transition('* => *', [ 
    query(':leave', [ 
     stagger(500, [ 
     animate(1000, style({ opacity: 0 })) 
     ]) 
    ], { optional: true }), 
    query(':enter', [ 
     style({ opacity: 0 }), 
     animate(1000, style({ opacity: 1 })) 
    ], { optional: true }) 
    ]) 
])