如何延遲每個ngFor項目動畫

如何延遲* ngFor的每個項目來一個接一個地動畫？如何延遲每個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>

做我需要一些時間間隔將項目添加到項目陣列或者也許有一些simplier方式？

來源

2016-09-29 Damian Martyniuk

也許類似http://stackoverflow.com/questions/39762304/angular-2-loop通過一個列表與一些延遲/ 39763030＃39763030 –

似乎有點複雜這樣一個簡單的任務，但謝謝你，我會嘗試用這種方法 –

嘗試設置它在一個窗口屬性在這個問題上： http：// st ackoverflow.com/questions/40145581/angular-2-pass-delay-to-component-animation-as-input-parameter – user3567879

現在應該可以在角度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 }) 
    ]) 
])

來源

2017-06-19 20:18:19

如何延遲每個ngFor項目動畫

回答

相關問題