How to delay each ngFor items animation

Question

how can i delay each item of *ngFor to animate one after another ?

i mean something like this:

<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>

do i need to add items to items array at some interval or maybe there is some simplier way ?

Perhaps something like http://stackoverflow.com/questions/39762304/angular-2-loop-through-a-list-with-some-delay/39763030#39763030 — Günter Zöchbauer, Sep 29 '16 at 10:36
seems a bit complicated for such a simple task, but thank you, i'am going to try with this approach — Damian Martyniuk, Sep 29 '16 at 14:14
Try to set it in a window property like in this question: http://stackoverflow.com/questions/40145581/angular-2-pass-delay-to-component-animation-as-input-parameter — user3567879, Mar 01 '17 at 14:15

score 5 · Accepted Answer · answered Jun 19 '17 at 20:18

This should now be possible in angular 4.2 (haven't tested it myself though). Following example is copied from this blog post:

Template code:

<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>

Animation code:

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 })
  ])
])

How to delay each ngFor items animation

1 Answers1