Vue2 过渡与动画过渡和动画让应用的交互更加流畅自然。Vue 提供了内置的transition和transition-group组件配合 CSS 和 JavaScript 钩子可以轻松实现各种进入、离开和列表过渡效果。一、前言在 modern web 应用中用户体验至关重要。元素的突然出现和消失会让界面显得生硬而恰当的过渡动画能够引导用户的注意力传达状态变化加载、成功、错误提升应用的质感与专业度Vue 内置了一套完善的过渡系统无需引入第三方库即可实现大多数动画需求。Vue 过渡系统单元素/组件过渡列表过渡状态过渡transition 组件CSS 过渡/动画JavaScript 钩子transition-group 组件列表排序动画FLIP 动画数字/颜色插值二、transition 组件2.1 基本用法使用transition包裹需要过渡的元素或组件transitionnamefadepv-ifshow内容/p/transition/* 进入/离开的激活状态 */.fade-enter-active, .fade-leave-active{transition:opacity 0.5s;}/* 进入开始 / 离开结束 */.fade-enter, .fade-leave-to{opacity:0;}2.2 过渡类名详解Vue 为过渡元素自动添加 6 个类名离开激活进入离开激活进入v-enter - v-enter-active - v-enter-tov-leave - v-leave-active - v-leave-to类名说明v-enter进入开始状态元素插入前生效v-enter-active进入整个激活状态过渡/动画生效期间v-enter-to进入结束状态Vue 2.1.8v-leave离开开始状态v-leave-active离开整个激活状态v-leave-to离开结束状态Vue 2.1.8使用namefade后类名前缀v-替换为fade-。2.3 CSS 过渡示例templatedivbuttonclickshow !show切换/buttontransitionnameslide-fadepv-ifshow带位移的淡入淡出/p/transition/div/template/* 进入和离开动画 */.slide-fade-enter-active{transition:all 0.3s ease;}.slide-fade-leave-active{transition:all 0.8scubic-bezier(1,0.5,0.8,1);}/* 进入开始 / 离开结束状态 */.slide-fade-enter, .slide-fade-leave-to{transform:translateX(10px);opacity:0;}三、CSS 动画3.1 使用 keyframes与 CSS 过渡的区别在于动画使用keyframestransitionnamebouncepv-ifshowstyledisplay:inline-block弹跳动画/p/transition.bounce-enter-active{animation:bounce-in 0.5s;}.bounce-leave-active{animation:bounce-in 0.5s reverse;}keyframesbounce-in{0%{transform:scale(0);}50%{transform:scale(1.5);}100%{transform:scale(1);}}3.2 自定义过渡类名当需要使用第三方 CSS 动画库如 Animate.css时可以自定义类名transitionenter-active-classanimate__animated animate__bounceInleave-active-classanimate__animated animate__bounceOutpv-ifshowAnimate.css 动画/p/transition四、JavaScript 钩子4.1 事件钩子函数可以在过渡属性中声明 JavaScript 钩子transitionbefore-enterbeforeEnterenterenterafter-enterafterEnterenter-cancelledenterCancelledbefore-leavebeforeLeaveleaveleaveafter-leaveafterLeaveleave-cancelledleaveCancelledpv-ifshowJavaScript 控制过渡/p/transitionmethods:{beforeEnter(el){el.style.opacity0;},enter(el,done){Velocity(el,{opacity:1,fontSize:1.4em},{duration:300,complete:done});},afterEnter(el){console.log(进入完成);}}注意使用 JavaScript 钩子时需要添加:cssfalse告诉 Vue 跳过 CSS 检测避免与 JavaScript 动画冲突。五、初始渲染过渡5.1 appear 属性在首次渲染时应用过渡效果transitionappearp页面加载时自动执行进入动画/p/transition也可以自定义 appear 类名transitionappearappear-classcustom-appear-classappear-active-classcustom-appear-active-classp自定义初始动画/p/transition六、transition-group 列表过渡6.1 列表的进入/离开过渡transition-group用于同时渲染多个元素的过渡transition-groupnamelisttagulliv-foritem in items:keyitem.id{{ item.text }}/li/transition-group.list-enter-active, .list-leave-active{transition:all 0.5s;}.list-enter, .list-leave-to{opacity:0;transform:translateX(30px);}6.2 列表排序过渡为列表的排序添加平滑过渡transition-groupnameflip-listtagulliv-foritem in items:keyitem.id{{ item.text }}/li/transition-group.flip-list-move{transition:transform 0.5s;}methods:{shuffle(){this.items_.shuffle(this.items);}}6.3 列表的交错过渡通过 data 属性与 CSS 变量实现交错延迟transition-groupnamestaggertagulliv-for(item, index) in items:keyitem.id:data-indexindex{{ item.text }}/li/transition-group.stagger-enter-active, .stagger-leave-active{transition:all 0.5s;}.stagger-enter, .stagger-leave-to{opacity:0;transform:translateY(30px);}.stagger-move{transition:transform 0.5s;}/* 交错过渡 */.stagger-enter-active{transition-delay:calc(0.1s *var(--index));}七、可复用的过渡组件将过渡封装为可复用组件// components/FadeTransition.vuetemplatetransition namefademodeout-inslot/slot/transition/templatestyle scoped.fade-enter-active,.fade-leave-active{transition:opacity0.3s ease;}.fade-enter,.fade-leave-to{opacity:0;}/style使用FadeTransitionrouter-view//FadeTransition八、过渡模式8.1 mode 属性当切换两个元素时控制进入和离开的顺序!-- in-out新元素先进入旧元素再离开 --transitionnamefademodein-outbutton:keyisEditingclickisEditing !isEditing{{ isEditing ? 保存 : 编辑 }}/button/transition!-- out-in旧元素先离开新元素再进入推荐 --transitionnamefademodeout-incomponent:iscurrentView/component/transition模式说明适用场景in-out新元素先进入较少使用可能重叠out-in旧元素先离开推荐避免位置重叠九、第三方动画库集成9.1 使用 GSAPtransitionenterenterleaveleave:cssfalsepv-ifshowGSAP 动画/p/transitionimportgsapfromgsap;methods:{enter(el,done){gsap.from(el,{opacity:0,y:-50,duration:0.5,onComplete:done});},leave(el,done){gsap.to(el,{opacity:0,y:50,duration:0.5,onComplete:done});}}十、总结特性用途关键属性/类名transition单元素/组件过渡name, mode, appear进入类控制进入动画v-enter, v-enter-active, v-enter-to离开类控制离开动画v-leave, v-leave-active, v-leave-totransition-group列表过渡tag, move-classJavaScript 钩子复杂动画控制enter, leaveappear初始渲染动画appear, appear-class核心原则优先使用 CSS 过渡性能更好复杂场景使用 JavaScript 钩子配合动画库。下一章我们将学习 Vue 的渲染函数与 JSX深入理解 Vue 的模板编译机制。十一、练习实现一个带淡入淡出效果的模态框组件创建一个可排序的待办事项列表添加/删除/排序都有平滑动画使用 transition-group 实现一个图片画廊支持添加/删除图片封装一个通用的 FadeTransition 组件用于路由切换动画