vue如何实现动画
Vue 动画的实现方式
Vue 提供了多种方式实现动画效果，主要通过内置组件和第三方库完成。
使用 <transition> 和 <transition-group> 组件
Vue 内置的 <transition> 和 <transition-group> 组件可以为元素或组件的进入/离开添加动画效果。通过 CSS 类名或 JavaScript 钩子实现。
<transition name="fade">
<div v-if="show">内容</div>
</transition>对应的 CSS 样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}使用 CSS 动画库
可以引入第三方 CSS 动画库如 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 钩子函数实现更复杂的动画逻辑，例如结合 GSAP 等动画库。
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<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
})
},
leave(el, done) {
gsap.to(el, {
opacity: 0,
duration: 1,
onComplete: done
})
}
}列表动画
对于列表项动画，使用 <transition-group> 组件，并为每个元素设置唯一的 key。
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>状态动画
通过 Vue 的响应式系统和计算属性，可以实现基于状态变化的动画效果。
<template>
<div :style="{ transform: `scale(${scale})` }">可缩放元素</div>
</template>
data() {
return {
hover: false
}
},
computed: {
scale() {
return this.hover ? 1.2 : 1
}
}第三方动画库
集成专业动画库如 GSAP、anime.js 或 Motion One，可实现更复杂的动画效果。
import { gsap } from 'gsap'
mounted() {
gsap.to('.box', {
x: 100,
duration: 1,
repeat: -1,
yoyo: true
})
}路由过渡动画
在 Vue Router 中，可以为路由切换添加过渡效果。
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
