title: How can I do a crossfade with angular animate and ngFor?
body: <p>I'm triggering an animation when I update the collection I pass into <code>*ngFor</code>: </p>
  
  <pre><code>//JS
  state : string = 'a';
  colors = {
    a: ['red','blue','green','yellow'],
    b: ['orange']
  }
  
  public onClick (){
    this.state = this.state === 'a' ? 'b' : 'a';
  }
  
  //HTML
  &lt;div *ngFor="let color of colors[state]" 
     [@animationState]="state" 
     (click)="onClick()"&gt;
       {{color}}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The problem:</strong> While the animation is happening, colors from both <code>a</code> and <code>b</code> display, which makes the animation jerky. </p>
  
  <p><strong>I've tried:</strong></p>
  
  <ul>
  <li>setting <code>transform: scale(0)</code> or <code>display:none</code> before the <code>void =&gt; *</code> animation begins</li>
  <li>delaying the <code>void =&gt; *</code> animation by the duration of the <code>* =&gt; void</code> animation</li>
  </ul>
  
  <p><strong>I want:</strong> to smoothly fade and/or slide out my existing content before (or while) the new content fades/slides in. </p>
  
  <p>Here's a plunkr that demonstrates the problem: <a href="https://plnkr.co/edit/IDE6q6lJ84QI2Zirvn4P?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/IDE6q6lJ84QI2Zirvn4P?p=preview</a></p>