Vue2用<transition>实现淡入淡出需三步：1.用transition包裹v-if/v-show元素并命名（如name="fade"），支持appear；2.定义.fade-enter/.fade-leave-to设opacity:0，.fade-enter-active/.fade-leave-active设transition；3.通过数据驱动v-if控制显隐触发动画。
Vue2 用 <transition> 组件实现淡入淡出，核心就三步：包裹元素、命名过渡、写好对应 CSS 类。
1. 用 transition 包裹需要动画的元素
必须配合 v-if 或 v-show 使用，否则不会触发过渡。推荐优先用 v-if，因为 v-show 只是切 display，不触发完整生命周期类名。
-
<transition name="fade">是标准写法，name属性决定后续 CSS 类前缀 - 如果希望页面首次加载时也执行入场动画，加上
appear属性：<transition name="fade" appear> - 被包裹的元素只能有一个根节点（比如不能直接包
v-for列表，要用<transition-group>）
2. 定义 fade 开头的六个 CSS 类
Vue2 会按阶段自动添加/移除这些类，只需写样式，不用手动控制时机。
-
.fade-enter：元素刚进入时的状态（Vue2 中等价于.fade-enter-from，旧版写法） -
.fade-enter-active：整个进入过程生效，这里写transition属性 -
.fade-leave：元素开始离开时的状态（Vue2 中等价于.fade-leave-from） -
.fade-leave-active：整个离开过程生效，同样写transition -
.fade-enter-to和.fade-leave-to在 Vue2 中可选，常省略，靠默认值或 active 类覆盖
常用简写方式（兼容性强）：
立即学习“前端免费学习笔记（深入）”；
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
3. 控制显示状态的数据驱动
动画由数据变化触发，不是靠 JS 手动调用。
- 在
data中定义布尔值，如show: true - 用
v-if="show"控制元素存在与否 - 用按钮或事件修改
show，Vue 自动识别并应用 enter/leave 类
示例片段：
<button @click="show = !show">切换</button> <transition name="fade"> <p v-if="show">我有淡入淡出效果</p> </transition>
4. 注意事项和常见问题
实际开发中容易卡住的地方：
- 类名拼错（比如写成
fade-enter-from但 Vue2 默认用fade-enter，除非显式启用新命名规则） - 没写
transition属性，只设了 opacity 却看不到动画 - 把
<transition>放在v-for外层却想给每个 item 动画——该用<transition-group> - 使用
v-show时，enter类不会触发，因为 DOM 始终存在
