javascript - 为什么 Vue 在替换或创建和删除数组项时使用不同的动画？

Question

当单击“流”按钮时的动画与从下面的 jsfiddle 中单击“随机流”按钮后的动画不同时，我遇到了过渡问题。

也许我的样式有误，但无法意识到为什么仍然会出现流行为。

我需要像 div 数组的“随机流”那样的行为。

谢谢

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 .