过渡组件组

内置组件 - 无需注册即可在任意别的组件中使用

为列表中的多个元素或组件提供过渡效果

一个 v-for 列表中的元素或组件被插入，移动|顺序改变，或移除时应用动画

不需要使用条件来决定渲染过渡

默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染

列表中的每个元素都必须有一个独一无二的 key attribute

和 <Transition> 的使用方法- 基本一致

多用于应用管理场景：用户管理、留言管理、商品管理、代办事项等等

更多信息，请访问官方文档 - transition-group 、官方文档 - API

属性 Props

拥有和<Transition>除了 mode以外的相同的属性，还具有特有属性

tag?: string

如果未定义，则渲染为片段 fragment

建议使用，可以节省一个DOM节点，如声明为 tag = "ul"

moveClass?: string

用于自定义过渡期间被应用的 CSS class；用于覆盖默认的 .v-move 类，从而实现自定义的移动过渡效果

在模板中使用 kebab-case，例如 move-class = "xxx"

新内置类

v-move

对移动中的元素应用的过渡

当列表中的元素因为重新排序而需要改变位置时，这个类会被应用到正在移动的元素上

如果使用了位移 transform，可能导致出现水平滚动条，请为容器指定 overflow-x: hidden

[] 代办事项

列表渲染事项数据

每条数据可以在完成时删除

删除时，要显示确认对话框 - 应用过渡

单击可以增加一条新的事项数据 - 应用过渡

参考结构

<template>
    <div>
        <h3>待办事项</h3>
        <div class="ipt-box">
            <input type="text" required v-model="todo" @keydown.enter="insertItem">
            <button @click="insertItem">增加</button>
        </div>
        <template v-if="arr.length">
            <div class="item">
                <p>序号</p>
                <p>待办事项</p>
                <p>操作</p>
            </div>
            <TransitionGroup name="list" tag="ul">
                <li class="item" v-for="(item, ind) in arr" :key="item.id" :style="`--delay: ${ind}`">
                    <p>{{ ind }}</p>
                    <p>{{ item }}</p>
                    <button class="del-btn" @click="deleteItem(ind)">删除</button>
                </li>
            </TransitionGroup>
        </template>
        <template v-else>暂无记录</template>
    </div>
</template>

样式

内联变量 --delay：依次延时触发

v-move：对移动中的元素应用的过渡，专用于<TransitionGroup>

v-leave-active：声明为绝对定位，保证删除不会跳跃

.v-move,
.v-enter-active,
.v-leave-active {
    transition: 0.4s ease-in-out calc(var(--delay)*0.1s);
}

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

.v-enter-from,
.v-leave-to {
    opacity: 0;
    transform: translateX(30px);
}