title: Animate the position of two or more DIV positions in Angular
body: <p>I need help to anymate the position switch of 2 or more divs dynamically rendered.
  Here is a simple example:</p>
  <pre><code>let objects: Array&lt;number&gt; = [];
  objects.push(1);
  objects.push(2);
  </code></pre>
  <p>The template:</p>
  <pre><code>&lt;div *ngFor=&quot;let obj of objects&quot;&gt;
      content {{object}}
  &lt;/div&gt;
  </code></pre>
  <p>From the template the user can change the position of object, moving the object &quot;1&quot; to the second position, and the object &quot;2&quot; will become the first one.</p>
  <p>I need an animation to expose clearly the movent to the user. Actually the result in DOM is this one:</p>
  <p>Before:</p>
  <pre><code>&lt;div&gt;
     content 1
  &lt;/div&gt;
  &lt;div&gt;
    content 2
  &lt;/div&gt;
  </code></pre>
  <p>After:</p>
  <pre><code>&lt;div&gt;
     content 2
  &lt;/div&gt;
  &lt;div&gt;
    content 1
  &lt;/div&gt;
  </code></pre>
  <p>The result is obtained modifying the source Array, changing the elements position.</p>
  <p>Which solution could I use? I can use more complex objects to handle this so I can modify the code if it's needed.</p>
  <p>Thanks</p>