Javascript 数组替换后的VueJS动画

我想制作一个数组替换的动画。我有一个例子，当我的数组被替换，我必须动画它从右向左过渡。我不确定过渡小组是否会在这里工作——不推和切片。如何做到这一点

JS

HTML

代码示例：

---

关于

它将与转换组一起正常工作，因为在您更改阵列（无论是推送/切片还是完全替换）时，转换将被启动

这是非常重要的

---

你需要更准确地说明你希望如何更换它们。一套123从一边出去，另一套从另一边进来？这两套会同时放映吗？

new Vue({
  el: '#app',
  data: {
    array:  [1,2,3]
  },
  mounted:  function()  {
     setTimeout(() => this.array = [4,5,6], 5000)
  }

})

<div id="app">
  <p v-for="item in array">{{item}}</p>
</div>

<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%);
}