倾听童心：妈妈与“小马拉大车”的爱与成长

文章目录核心作用

单元素/组件过渡

列表过渡

默认过渡类名核心

自定义过渡类名避冲突

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:0v-enter-active进入过程状态定义过渡规则transition时间/曲线v-enter-to进入结束状态最终样式如opacity:1离开阶段元素删除/隐藏v-leave-from离开开始状态初始样式如opacity:1v-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

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-forkey要求 无 子元素必须加唯一key渲染标签 无自身渲染标签 默认可通过tag自定义

bgmbgmbgm胖老太太东北-bgmbgmbgm胖老太太东北应用