title: VueJS animation after array replace
body: <p>I would like to animate an array replacement. I have a case when my array is being replaced and I have to animate it (transition from right to the left). I am not sure if transition-group will work here (no pushing and slicing). How to do this?</p>
  
  <p>JS</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      array:  [1,2,3]
    },
    mounted:  function()  {
       setTimeout(() =&gt; this.array = [4,5,6], 5000)
    }
  
  })
  </code></pre>
  
  <p>HTML
      </p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;p v-for="item in array"&gt;{{item}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Code example:
  <a href="https://codepen.io/anon/pen/WyzYaV?page=1&amp;" rel="nofollow noreferrer">https://codepen.io/anon/pen/WyzYaV?page=1&amp;</a></p>
  
  <p>Regards</p>