Angular 2 animate *ngFor list item one after other using new Animation support in RC 5

Question

I have a component that fetches list of items from server and then display that list using *ngFor in template.

I want the list to be displayed with some animation, but one after other. I mean each list item should animate in after other.

I am trying something like this:

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 I am using it like:

<ul>     <li *ngFor="let item of list;">      <list-item [item]="item"></list-item>     </li> </ul> 

What it does is displays whole list at once. I want items to enter one by one with some animation.

Answer 1

I couldn't find stagger support on ngFor in the documentation, but there's now animation.done events, which can be used to make staggering ngFor

StackBlitz

@Component({   selector: 'my-app',   template: `     <ul>     <li *ngFor="let hero of staggeringHeroes; let i = index"         (@flyInOut.done)="doNext()"         [@flyInOut]="'in'" (click)="removeMe(i)">       {{hero}}     </li>   </ul>   `,   animations: [   trigger('flyInOut', [     state('in', style({transform: 'translateX(0)'})),     transition('void => *', [       animate(300, keyframes([         style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),         style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),         style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})       ]))     ]),     transition('* => void', [       animate(300, keyframes([         style({opacity: 1, transform: 'translateX(0)',     offset: 0}),         style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),         style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})       ]))     ])   ]) ] }) export class App {   heroes: any[] = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India'];    next: number = 0;   staggeringHeroes: any[] = [];    constructor(){     this.doNext();   }    doNext() {     if(this.next < this.heroes.length) {       this.staggeringHeroes.push(this.heroes[this.next++]);     }   }    removeMe(i) {     this.staggeringHeroes.splice(i, 1);   } }