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

I couldn't find stagger support on ngFor in the documentation, butthere'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);  }}

To use the angular2 animations I set a state property to the iterated item and then just setup a toggle function for the mouseover and mouseout functions. This way each item encapsulated it's animated state and then I could change it as needed

<li   *ngFor="let item of itemsList"   (mouseover)="toogleAnimation(item)"   (mouseout)="toogleAnimation(item)">{{ item.name }}  <div class="animation_wrapper" [@slideInOut]="item.state">    <span class="glyphicon glyphicon-refresh"></span>    <span class="glyphicon glyphicon-trash"></span>  </div></li>

what you want, of the time between each item in the list, see this code. change the file .css to .scss

like this https://codepen.io/jhenriquez856/pen/baPagq

$total-items: 5;body {  font-family: sans-serif;  background: #111;  color: #fff;}ul {  width: 300px;  left: 50%;  margin-top: 25px;  margin-left: -150px;    position: absolute;}li {  position: relative;  display: block;  border: 1px solid hotpink;  margin-bottom: 5px;  padding: 10px;  text-align: center;  text-transform: uppercase;  animation: fadeIn 0.5s linear;  animation-fill-mode: both;}// Set delay per List Item@for $i from 1 through $total-items {  li:nth-child(#{$i}) {    animation-delay: .25s * $i;  }}// Keyframe animation@-webkit-keyframes fadeIn {  0% {    opacity: 0;  }  75% {    opacity: 0.5;  }  100% {    opacity: 1;  }}

<ul>  <li>item 1</li>  <li>item 2</li>  <li>item 3</li>  <li>item 4</li>  <li>item 5</li></ul>