vue实现过渡效果
使用 <transition> 组件
Vue 提供了内置的 <transition> 组件，用于在元素插入、更新或移除时应用过渡效果。只需将需要过渡的元素包裹在 <transition> 标签内，并为其指定 name 属性。过渡效果通过 CSS 类名自动应用。
<transition name="fade">
<div v-if="show">内容</div>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}结合 CSS 动画
除了过渡效果，还可以使用 CSS 动画实现更复杂的动效。通过 enter-active-class 和 leave-active-class 指定自定义动画类名。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>使用 JavaScript 钩子
通过 JavaScript 钩子（如 beforeEnter、enter、afterEnter）可以更精细地控制过渡逻辑。通常与第三方动画库（如 GSAP）结合使用。
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div v-if="show">内容</div>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
duration: 1,
onComplete: done
});
},
afterEnter(el) {
console.log('动画完成');
}
}列表过渡（<transition-group>）
需要对多个元素（如列表）应用过渡时，使用 <transition-group>。每个元素需要唯一的 key，动画效果会作用于列表的增减和排序。
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}动态过渡与模式
通过动态绑定 name 属性切换不同的过渡效果，或使用 mode="out-in" 控制元素交替行为（当前元素先离开，新元素再进入）。
<transition :name="transitionName" mode="out-in">
<component :is="currentComponent"></component>
</transition>第三方动画库集成
例如结合 Animate.css，直接通过类名调用预设动画：
<transition
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<div v-if="show">内容</div>
</transition>需确保已安装并引入 Animate.css：
npm install animate.cssimport 'animate.css';
