Question

我想为数组替换设置动画。我有一种情况，当阵列被替换时，我必须对其进行动画处理（从右向左过渡）。我不确定过渡组是否会在这里工作（不进行推送和切片）。该怎么做？

JS

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&

致谢

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

数组替换后的VueJS动画

1 个答案: