Angular 2 animate *ngFor list item one after other using new Animation support in RC 5
<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>