title: How to animate elements on array insertion Angular?
body: <p>I'm a real newbie in angular animations, never had to use anything else than simple transitions until now.
  I think what i'm looking for is very simple, yet I can't figure out what I'm missing.</p>
  
  <p>I have an array displayed in template with ngFor. I can insert or delete elements of this array with a simple button click. Right now I have a simple animation taken from the Angular doc to change the opacity of inserted or deleted element :</p>
  
  <pre><code>trigger(
        'inOutAnimation', 
        [
          transition(
            ':enter', 
            [
              style({ opacity: 0 }),
              animate('1s ease-out', style({ opacity: 1 }))
            ]
          ),
          transition(
            ':leave', 
            [
              style({ opacity: 1 }),
              animate('1s ease-in', style({ opacity: 0 }))
            ]
          )
        ]
      )
  </code></pre>
  
  <p>What I need now is to create an animation to move surrounding elements to their new position on the page. I don't want the existing elements to just pop on their new positions. 
  How can I do this ? Because it looks like the trigger <code>inOutAnimation</code> only targets the added or deleted element. How to manage transitions of other array elements ? 
  Also I was always using moving transitions on elements with known initial and final positions. Now with an array the positions of elements are dynamic.</p>
  
  <p>Your help would be gladly appreciated</p>
  
  <p>EDIT: </p>
  
  <p><a href="https://stackblitz.com/edit/angular-szt5hm" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-szt5hm</a></p>
  
  <p>In this example I would like when I click on Add that the div 3 slides/moves to position of 4 instead of just poping. same for 4 to 5 etc.</p>