在使用 v-for 时，交换或移动列表中的元素，出现 CSS 过渡动画丢失 #8867

WBBB0730 · 2023-07-28T14:56:41Z

WBBB0730
Jul 28, 2023

我在尝试实现一个类似于 Steam 愿望单的拖拽排序，但是在过程中发现，在移动列表中的元素位置时，如果移动的目标位置与原位置相邻，则后面的元素会丢失 CSS 过渡动画。
我该如何使它保持优雅的 CSS 动画？

写了个简单的 demo 测试

<template>
  <div style="margin-left: 200px">
    <div style="height: 500px; position:relative;">
      <div v-for="(item, index) in list" :key="item"
            style="position:absolute; display: inline-block; width: 100px; height: 100px; background-color: white; transition: left 1s"
            :style="{ left: index * 120 + 'px', top: (item - 1) * 120 + 'px' }">
            {{ item }}
        </div>
    </div>
    <button @click="swap(0, 1)">SWAP 1, 2</button>
    <button @click="swap(0, 2)">SWAP 1, 3</button>
    <button @click="swap(0, 3)">SWAP 1, 4</button>
    <br>
    <button @click="move(0, 2)">MOVE 1 TO 3</button>
    <button @click="move(0, 3)">MOVE 1 TO 4</button>
    <button @click="move(2, 0)">MOVE 3 TO 1</button>
    <button @click="move(3, 0)">MOVE 4 TO 1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const list = ref([1, 2, 3, 4])

function swap(a, b) {
  [list.value[a], list.value[b]] = [list.value[b], list.value[a]]
}

function move(a, b) {
  const temp = list.value.splice(a, 1)[0]
  list.value.splice(b, 0, temp)
}
</script>

<style scoped lang="scss">
</style>

测试结果：
交换 1、2 时，2 的 CSS 动画丢失
交换 1、3 时，3 的 CSS 动画丢失
交换 1、4 时，1、4 的 CSS 动画都丢失
移动时，移动的元素 CSS 动画丢失

希望了解 Vue 源码的大佬帮忙解答一下