为什么在更换或创建和删除数组项时Vue的动画效果不同？

Question

当点击“流”按钮时动画与点击“jsfiddle bellow”中的“流随机”按钮后的动画不同时遇到过渡问题。

也许我的造型错了，但无法理解为什么还要获得流行为。

对于div的数组，我需要'stream random'的行为。

谢谢

new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    add: function (item) {
      this.items.splice(this.items.length, 0, item)
    },
    remove: function () {
      return this.items.splice(0, 1)[0]
    },
    stream: function () {
    	this.add(this.remove())
    },
    streamrnd: function () {
    	this.add(this.nextNum++)
      this.remove()
    }
  }
})

.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
  border: 1px solid green;
  padding: 10px 10px 10px 10px;
}
.innerDiv {
  border: 1px solid red;
}
.list-complete-enter {
  opacity: 0;
  transform: translateX(40px);
}
.list-complete-leave-to {
  opacity: 0;
  transform: translateX(-40px);
}
.list-complete-leave-active {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>

<div id="list-complete-demo">

  <button v-on:click="stream">Stream</button>
  <button v-on:click="streamrnd">Stream Random</button>
  
  <transition-group 
    name="list-complete" 
    tag="div" 
    style="margin-top: 50px">
      <div
        v-for="item in items"
        :key="item"
        class="list-complete-item">
          <div class='innerDiv'>{{ item }}</div>
      </div>
  </transition-group>
</div>

Answer 1

您已按项目本身键入过渡元素，这是一个数字。

单击流按钮时，您将从阵列中删除最后一项并将其插入阵列的开头。由于该项的键是相同的，因此Vue检测到该项已在数组中移动并按原样转换。

单击流随机按钮时，将从阵列中删除最后一项，并插入一个新的唯一项，其中的键与DOM中的现有项不同。 Vue将为已删除的项目执行离开转换，并为新项目执行输入转换。

您需要使用key来控制Vue如何重用项目的DOM元素。

您可以为数组中的每个项目关联一个唯一的数字键，以防止Vue重用跨度：

<span v-for="item in items" :key="item.key">{{ item.value }}</span>

data: {
  items: [
    { key: 1, value: 1 },
    { key: 2, value: 2 },
    { key: 3, value: 3 },
    { key: 4, value: 4 },
    { key: 5, value: 5 },
    { key: 6, value: 6 },
    { key: 7, value: 7 },
    { key: 8, value: 8 },
    { key: 9, value: 9 },
  ],
  nextNum: 10,
  nextKey: 10
},

methods: {
  add(item) {
    this.items.splice(0, 0, {
      key: this.nextKey++,
      value: isNaN(item) ? this.nextNum++ : item,
    })
  },

  remove() {
    return this.items.splice(this.items.length - 1, 1)[0].value
  },

  stream() {
    this.add(this.remove())
  },

  streamrnd() {
    this.add(this.nextNum++)
    this.remove()
  }
}

显然你可以简化代码，但你明白了。

Updated fiddle。

Answer 2

在stream函数中，您要将已删除的元素添加回数组中。所以动画将它从结尾移动到开始。

在streamrnd函数中，您只需完全删除它，然后添加一个新的。所以它相应地动画。