<Transition> 单元素进出场过渡
最后更新：2026-10-22
<Transition> 单元素进出场过渡
| 分组 | 内置组件与元素 |
|---|---|
| 类型 | 组件/元素 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<Transition name="fade">
<p v-if="show">内容</p>
</Transition>
/* 类名：fade-enter-active / fade-enter-from / fade-enter-to（leave 同理） */
.fade-enter-active { transition: opacity .3s }
.fade-enter-from { opacity: 0 }⚙️ 参数
| props | name（类名前缀）/ appear / mode（out-in 等）/ duration / css:false 启用 JS 钩子 |
|---|
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
点击切换时段落淡出、再淡入（约 0.3 秒）。💡 要点
💡 提示 name 决定类名前缀（fade-*）；不写则用默认 v-*。
⚠️ 注意 内部必须只有一个根元素/组件：多个元素要用 或 v-if/v-else 分支。
ℹ️ 说明 mode="out-in" 让旧元素离场完成后再入场，避免位置跳变。
🏷️ 相关内置组件与元素
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 为什么没有动画效果？
A 多数是没写对应 CSS，或类名前缀与 name 不匹配；检查 fade-enter-active 等规则。
Q 能同时用 CSS 和 JS 吗？
A 可以，但 css:false 时只用 JS 钩子，避免双重控制。
Q 列表动画怎么做？
A 用 <TransitionGroup>，它额外提供移动过渡（.move 类）。
