title: Angular Stagger Animation for multiple new elements
body: <p>I'm trying to have a stagger animation in a list. Up till now I have managed to have the stagger animation on load. Apart from on load I'd like to have the stagger animation trigger when new items are added to the array.</p>
  
  <p><strong>I followed this example:</strong> <a href="https://medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e" rel="nofollow noreferrer">https://medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e</a></p>
  
  <p><strong>And came up with a quick test:</strong> <a href="https://stackblitz.com/edit/angular-stagger-animation-test2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-stagger-animation-test2</a></p>
  
  <p>In the <code>app.component.ts</code> I define the stagger animation and in the <code>child.component.ts</code> I define the element's animation.</p>
  
  <p><strong>Stagger Animation:</strong></p>
  
  <pre><code>trigger('list', [
      transition(':enter', [
          query('@animate',
              stagger(250, animateChild())
          )
      ])
  ])
  </code></pre>
  
  <p>The <code>query('@animate')</code> gets the child component element, with the <code>animateChild()</code> triggering the animation in the child component.</p>
  
  <p><strong>Child Animation:</strong></p>
  
  <pre><code>trigger('animate', [
    transition(':enter', [
      style({ opacity: 0, transform: 'translateY(-10px)' }),
      animate('250ms', style({ opacity: 1, transform: 'translateY(0px)' }))
    ]),
    transition(':leave', [
      style({ opacity: 1 }),
      animate('250ms', style({ opacity: 0, transform: 'translateY(10px)' }))
    ])
  ])
  </code></pre>
  
  <p>The main difference in my case is that I'm adding multiple objects to the array at once. I don't know if it possible to have the new items enter the page in a staggered manner.</p>