title: Angular Animation: animate only added item in ngFor list
body: <p>I have a list of array items in an <code>ngFor</code>.  I have a simple button the adds an an item to the array.  I want to apply an animation to the items when they are added <em>only</em> but although this works, the group of list items already on the page gets the animation on page load.  How can I limit the animation only to the newly added item? This is in Angular 10.</p>
  <p>I made a <a href="https://stackblitz.com/edit/angular-ivy-fadeinflash?file=src/app/app.component.ts" rel="nofollow noreferrer">stripped-down Stackblitz</a>.</p>
  <pre><code>animations: [
      trigger(&quot;myTrigger&quot;, [
        state(
          &quot;fadeInFlash&quot;,
          style({
            opacity: &quot;1&quot;
          })
        ),
        transition(&quot;void =&gt; *&quot;, [
          style({ opacity: &quot;0&quot;, transform: &quot;translateY(20px)&quot; }),
          animate(&quot;500ms&quot;)
        ])
      ])
    ]
  </code></pre>
  <pre><code>&lt;p&gt;
    &lt;button (click)=&quot;addItem()&quot;&gt;Add Item&lt;/button&gt;
  &lt;/p&gt;
  
  &lt;ul&gt;
    &lt;li *ngFor=&quot;let item of items&quot; [@myTrigger]='state'&gt;{{item}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>