title: Angular 2 animate *ngFor list item one after other using new Animation support in RC 5
body: <p>I have a component that fetches list of items from server and then display that list using *ngFor in template.</p>
  
  <p>I want the list to be displayed with some animation, but one after other. I mean each list item should animate in after other.</p>
  
  <p>I am trying something like this:</p>
  
  <pre><code>import { Component, Input, trigger, state, animate, transition, style } from '@angular/core';
  
  @Component({
      selector: 'list-item',
      template: ` &lt;li  @flyInOut="'in'"&gt;{{item}}&lt;/li&gt;`,
      animations: [
          trigger('flyInOut', [
              state('in', style({ transform: 'translateX(0)' })),
              transition('void =&gt; *', [
                  style({ transform: 'translateX(-100%)' }),
                  animate(100)
              ]),
              transition('* =&gt; void', [
                  animate(100, style({ transform: 'translateX(100%)' }))
              ])
          ])
      ]
  })
  export class ListItemComponent {
      @Input() item: any;
  }
  </code></pre>
  
  <p>and in my list component template I am using it like:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let item of list;"&gt;
       &lt;list-item [item]="item"&gt;&lt;/list-item&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What it does is displays whole list at once. I want items to enter one by one with some animation.</p>