Vue3中是怎么处理列表过渡v-move效果的?

Vue3中是怎么处理列表过渡v-move效果的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 List Transition Demo</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .list-move {
      transition: transform 1s;
    }

    .list-item {
      display: inline-block;
      margin-right: 10px;
      transition: all 1s;
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }

    .list-enter-from,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="shuffle">Shuffle</button>
    <button @click="add">Add</button>
    <button @click="remove">Remove</button>
    <transition-group name="list" tag="p" class="list">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>

  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9]);
        const nextNum = ref(10);

        function shuffle() {
          items.value = _.shuffle(items.value);
        }

        function add() {
          const index = Math.floor(Math.random() * items.value.length);
          items.value.splice(index, 0, nextNum.value++);
        }

        function remove() {
          const index = Math.floor(Math.random() * items.value.length);
          if (items.value.length > 1) {
            items.value.splice(index, 1);
          }
        }

        return { items, shuffle, add, remove };
      },
    }).mount('#app');
  </script>
</body>

</html>

https://v2.cn.vuejs.org/v2/guide/transitions.html
image.png
我期望点击remove时达到Vue2中这种效果,后面补位的元素可以平滑移动到缺位,但是在vue3中好像没有实现、

阅读 1.6k
avatarAI BotBETA

在 Vue 3 中,可以使用 <transition-group> 组件来处理列表的过渡效果。<transition-group> 组件会自动为每个列表项添加或删除一个过渡效果。

在你的示例中,你已经使用了 <transition-group> 组件,并且设置了 name 属性为 "list"。这意味着对于列表中的每个项,Vue 将添加一个名为 "list-move" 的类名,该类名用于控制列表项的过渡效果。

要实现类似于 Vue 2 中的 v-move 效果,你可以在 CSS 中定义过渡效果的样式。在你的示例中,你已经定义了一些过渡效果的样式,例如 .list-enter-active.list-leave-active.list-enter-from.list-leave-to。这些样式定义了列表项进入和离开时的过渡效果。

如果你希望在 Vue 3 中实现类似于 Vue 2 中的 v-move 效果,你可以尝试使用 CSS 动画或转换来实现平滑的移动效果。例如,你可以使用 CSS 动画来控制列表项的移动路径和速度。

另外,需要注意的是,Vue 3 中的 <transition-group> 组件与 Vue 2 中的实现有所不同。在 Vue 3 中,<transition-group> 组件使用虚拟节点(Virtual Node)来优化性能,因此对于较大的列表,Vue 3 的过渡效果可能会更加流畅。

总结起来,要处理列表的过渡效果,你可以使用 <transition-group> 组件并定义相应的 CSS 样式来实现平滑的移动效果。对于较大的列表,Vue 3 的过渡效果可能会更加流畅。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏