Vue List Move Transitions 只在重新排序时有效，不在拼接时

Question

我有一个 Vue.js 应用程序（同时使用 Vue 2 和 Vue 3 进行了测试）它在 transition-group 中显示了一个项目列表，它具有淡入淡出的效果并且还应该应用 list move transition.任何时候重新排序项目（即一个项目在另一个项目之前移动之后），应用移动过渡，但是如果一个项目被删除 splice 而其他项目保持相同顺序，则移动transition 不适用，移除后的项目会立即卡入到位。这是一个最小的例子：

new Vue({
  el: '#app',
  data: () => ({
    list: [1, 2, 3]
  }),
  methods: {
    reorder() {
      this.list.unshift(this.list[this.list.length - 1])
        this.list.splice(this.list.length - 1, 1)
    },
    remove() {
        this.list.splice(1, 1)
    }
  }
})

button {
  display: block;
}

li {
  transition: 0.2s;
}

.v-enter-active, .v-leave-active {
  transition: opacity .5s;
}
.v-enter, .v-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="reorder">Reorder</button>
  <button @click="remove" :disabled="list.length < 3">Remove Middle Item</button>

  <transition-group tag="ul">
    <li v-for="item in list" :key="item">{{ item }}</li>
  </transition-group>
</div>

Answer 1

这是我在 stack overflow 中的第一个答案，如果我的回答不准确，请先道歉。

根据 vue.js 文档，我设法通过将位置绝对添加到 class .v-leave-active 使其工作。我还修改了 li 过渡持续时间以匹配不透明度过渡时间。

希望对您有所帮助！

new Vue({
  el: '#app',
  data: () => ({
    list: [1, 2, 3]
  }),
  methods: {
    reorder() {
      this.list.unshift(this.list[this.list.length - 1])
        this.list.splice(this.list.length - 1, 1)
    },
    remove() {
        this.list.splice(1, 1)
    }
  }
})

button {
  display: block;
}

li {
  transition: 0.5s;
}

.v-enter-active, .v-leave-active {
  transition: opacity .5s;
}

.v-leave-active {
  position: absolute;
}

.v-enter, .v-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="reorder">Reorder</button>
  <button @click="remove" :disabled="list.length < 3">Remove Middle Item</button>

  <transition-group tag="ul">
    <li v-for="item in list" :key="item">{{ item }}</li>
  </transition-group>
</div>

Vue List Move Transitions 只在重新排序时有效，不在拼接时

Vue List Move Transitions Only Work When Reordering, But Not Splicing

transition

css-transitions

vue.js