前言本文是 《Vue 动画效果》系列的第一篇聚焦于最核心的Transition组件带你搞懂它的 6 个过渡类名、name 属性、duration 属性以及与 v-if/v-show 的配合。掌握这些你就能写出流畅的进入/离开动画了。核心一6个过渡类名6 个过渡类名速查表重点)阶段Vue3 类名Vue2 类名作用进入前xxx-enter-fromxxx-enter定义元素的初始状态透明、位移等进入动画中xxx-enter-active同左定义过渡时长、缓动函数进入结束xxx-enter-toxxx-enter-to定义元素的最终显示状态离开前xxx-leave-fromxxx-leave定义离开时的起始状态离开动画中xxx-leave-active同左定义离开过渡的时长、缓动离开结束xxx-leave-toxxx-leave-to定义元素隐藏的最终状态这里的 xxx 是什么就是下面要讲的 name 属性的值。示例1、淡入淡出动画 完整可运行代码template div button clickshow !show切换显示/button Transition namefade p v-ifshowHello Vue 动画/p /Transition /div /template script setup import { ref } from vue const show ref(false) /script style scoped /* 进入前 离开后透明 */ .fade-enter-from, .fade-leave-to { opacity: 0; } /* 过渡动画配置 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } /style代码解读①button clickshow !show切换显示/button触发动画的开关 ——点击按钮改变 show 的值从而触发元素显示/隐藏②const show ref(false):控制初始状态 ——false 表示页面加载时元素隐藏true 表示页面加载时就显示show 初始值为 false页面加载时元素不会显示第一次点击按钮才会触发进入动画。如果希望页面加载时就有动画可以添加 appear 属性。③Transition namefadename 决定了 CSS 类名的前缀fade-*④v-ifshow通过条件渲染触发进入/离开动画⑤样式部分定义了透明度的起始、过程和结束状态2、滑动入场从右侧滑入.slide-enter-from, .slide-leave-to{opacity:0;transform:translateX(30px);}.slide-enter-active, .slide-leave-active{transition:all 0.4s ease;}3、缩放弹出适合弹窗.scale-enter-from, .scale-leave-to{opacity:0;transform:scale(0.8);}.scale-enter-active, .scale-leave-active{transition:all 0.3s ease-out;}4、从上滑入适合下拉菜单.drop-enter-from, .drop-leave-to{opacity:0;transform:translateY(-20px);}.drop-enter-active, .drop-leave-active{transition:all 0.3s ease;}核心二name 属性 —— 类名的“前缀控制器”作用Transition namefade中的namefade决定了所有过渡类名以 fade- 开头。如果不写 name会使用默认前缀v-即类名会是 v-enter-from、v-leave-active 等。示例对比Transition nameslide→ 你需要写 .slide-enter-from 等样式。Transition→ 你需要写 .v-enter-from 等样式。最佳实践强烈建议总是为Transition指定一个有语义的 name避免样式冲突也让代码更清晰核心三duration 属性 —— 精确控制动画时长统一设置Transition namefade duration600进入和离开都是 600 毫秒。Transition namefade duration600 div v-ifshow内容/div /Transition分别设置Transition :duration{ enter: 300, leave: 800 }进入 300ms离开 800ms,适合进入轻快、离开舒缓的场景。Transition :duration{ enter: 300, leave: 800 } div v-ifshow内容/div /Transition核心四v-if 与 v-showtemplate div button clickshow !show切换/button div styledisplay: flex; gap: 40px; margin-top: 20px; div h4v-if完整动画/h4 Transition namefade p v-ifshow我是 v-if有完整进出动画/p /Transition /div div h4v-show只有进入/h4 Transition namefade p v-showshow我是 v-show只有进入动画/p /Transition /div /div /div /template style scoped .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } /style结论需要完整进入离开动画请使用 v-if如果只需要显示时的入场效果v-show 也可以但离开时不会有过渡总结核心概念一句话总结6个过渡类名进入/离开各 3 个阶段配合 name 前缀控制样式name 属性类名的前缀默认是 v-建议总是自定义duration 属性控制动画时长可统一或分别设置v-if 与 v-showv-if 有完整动画v-show 只有进入分工v-if 负责触发name 负责命名类名负责执行duration 负责节奏下一篇将进入TransitionGroup的世界
