Vue Transition/TransitionGroup 核心笔记

核心作用

Vue内置无需注册的过渡组件，为元素显隐/增删/移动添加平滑动画，避免切换生硬。

一、 单元素/组件过渡

1. 适用：单个元素/组件的过渡（v-if/v-show/动态组件/key变化场景）
2. 规则：内部仅能有1个根元素（v-if/v-else/v-else-if切换除外）
3. 解决重叠：添加 mode=“out-in” ，让旧元素先离开，新元素再进入（唯一支持mode的过渡组件）

二、 列表过渡

1. 适用：多元素/列表过渡（99%配合v-for使用，设计初衷为列表）
2. 规则：内部可多个根元素，子元素必须加唯一key（推荐id，禁用索引）
3. 特性：默认渲染为，可通过 tag 自定义语义标签（如tag=“ul”/“div”）
4. 注意：不支持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自定义