文章目录
- 核心作用
- 一、 单元素/组件过渡
- 二、 列表过渡
- 三、默认过渡类名（核心）
- 四、自定义过渡类名（避冲突）
- 五、CSS核心写法
- 六、核心区别（必记）
核心作用
Vue内置无需注册的过渡组件，为元素显隐/增删/移动添加平滑动画，避免切换生硬。
一、 单元素/组件过渡
- 适用：单个元素/组件的过渡（v-if/v-show/动态组件/key变化场景）
- 规则：内部仅能有1个根元素（v-if/v-else/v-else-if切换除外）
- 解决重叠：添加 mode=“out-in” ，让旧元素先离开，新元素再进入（唯一支持mode的过渡组件）
二、 列表过渡
- 适用：多元素/列表过渡（99%配合v-for使用，设计初衷为列表）
- 规则：内部可多个根元素，子元素必须加唯一key（推荐id，禁用索引）
- 特性：默认渲染为，可通过 tag 自定义语义标签（如tag=“ul”/“div”）
- 注意：不支持mode属性（列表无新旧元素重叠问题）
三、默认过渡类名（核心）
未自定义name时，前缀为 v- ，分进入/离开两个阶段，各3个类名，Vue自动添删：
进入阶段（元素新增/显示）
- v-enter-from：进入开始状态（初始样式，如opacity:0）
- v-enter-active：进入过程状态（定义过渡规则：transition时间/曲线）
- v-enter-to：进入结束状态（最终样式，如opacity:1）
离开阶段（元素删除/隐藏）
- v-leave-from：离开开始状态（初始样式，如opacity:1）
- v-leave-active：离开过程状态（同进入，统一定义过渡规则）
- v-leave-to：离开结束状态（最终样式，如opacity:0）
四、自定义过渡类名（避冲突）
给组件添加 name 属性，替换默认 v- 前缀，解决多过渡样式冲突：
- 示例：
- 对应类名：fade-enter-from、fade-leave-active、fade-enter-to等
五、CSS核心写法
css
/* 定义过渡过程：时间+曲线（-active类统一写）/
.xxx-enter-active, .xxx-leave-active {
transition: all 0.5s ease; /all可指定opacity/transform等具体属性/
}
/定义开始/结束状态（-from/-to类写样式）/
.xxx-enter-from, .xxx-leave-to {
opacity: 0; /透明过渡，可叠加位移transform: translateX(30px) */
}
（xxx为默认v-或自定义name前缀）
六、核心区别（必记）
特性
根元素数量 仅1个（v-if系列除外） 多个（适配列表）
mode属性 支持（out-in解决重叠） 不支持
核心使用场景 单元素显隐/切换 列表增删/移动（配合v-for）
key要求 无 子元素必须加唯一key
渲染标签 无自身渲染标签 默认，可通过tag自定义
