vue实现过渡动画
Vue 过渡动画实现方法
Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于处理进入/离开过渡和列表动画。以下是几种常见的实现方式：
使用 CSS 过渡类名
Vue 会自动为过渡元素添加以下类名，通过定义对应的 CSS 样式实现动画效果：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}<transition name="fade">
<div v-if="show">内容</div>
</transition>使用 CSS 动画
通过定义 CSS @keyframes 动画实现更复杂效果：
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% { transform: scale(0) }
50% { transform: scale(1.5) }
100% { transform: scale(1) }
}自定义过渡类名
可以覆盖默认的类名，与第三方动画库（如 Animate.css）配合使用：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>JavaScript 钩子函数
通过 JavaScript 钩子实现更复杂的动画逻辑：
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-if="show">内容</div>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
duration: 500,
complete: done
})
}
}列表过渡
使用 <transition-group> 实现列表项的动画：
<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 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}状态过渡
通过 Vue 的响应式系统和第三方库实现数值变化的动画：
import gsap from 'gsap'
watch: {
number(newVal) {
gsap.to(this.$data, {
duration: 0.5,
animatedNumber: newVal
})
}
}注意事项
- 确保为列表项提供唯一的
key属性 - 过渡模式
mode="out-in"可控制先后顺序 - 使用
appear属性实现初始渲染过渡 - 复杂动画建议使用 GSAP、Anime.js 等专业动画库
以上方法可以根据具体需求组合使用，实现从简单到复杂的各种过渡动画效果。
