[Vuejs]-VueJS animation after array replace

It will work just fine with transition-group as transitions are kicked off any time you change the array, whether it’s push/slice or a full replacement.

This is pretty much straight from the docs.

<div id="app">
  <transition-group name="list"  mode="out-in" tag="p">
    <p v-for="item in array" v-bind:key="item" class="list-item">{{item}}</p>
  <transition-group>
</div>


.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0.4;
  float: right;
  transform: translateX(100%);
}