数组替换后的VueJS动画

【问题标题】：VueJS animation after array replace数组替换后的VueJS动画
【发布时间】：2025-12-17 22:40:01
【问题描述】：

我想为数组替换制作动画。我有一个案例，当我的数组被替换时，我必须对其进行动画处理（从右到左转换）。我不确定过渡组是否可以在这里工作（没有推送和切片）。如何做到这一点？

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

})

HTML

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

代码示例： https://codepen.io/anon/pen/WyzYaV?page=1&

问候

【问题讨论】：

您需要更准确地确定您希望如何替换它们。一组（123）从一侧出去，另一组从另一侧进来？这两个集合会同时显示吗？

标签： javascript html css animation vue.js

【解决方案1】：

它可以与transition-group 一起正常工作，因为每当您更改数组时都会启动转换，无论是推送/切片还是完全替换。

这几乎是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%);
}

【讨论】：