vue 动画 实现
Vue 动画实现方法
Vue 提供了多种方式实现动画效果，包括内置组件、CSS 过渡和第三方库集成。
使用 Vue 内置 <transition> 组件
Vue 的 <transition> 组件可以为元素或组件的进入/离开过渡添加动画效果。基本用法如下：
<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 动画关键帧（@keyframes）实现更复杂的动画效果：
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.bounce-enter-active {
animation: bounce 0.5s;
}
.bounce-leave-active {
animation: bounce 0.5s reverse;
}列表过渡
对于多个元素的列表动画，可以使用 <transition-group> 组件：
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>对应的 CSS 样式：
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}使用 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>JavaScript 方法：
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 300, complete: done });
}
}集成第三方动画库
Vue 可以与流行的动画库如 GSAP、Animate.css 等配合使用：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>需要先安装并引入 Animate.css：
npm install animate.css然后在 main.js 中引入：
import 'animate.css';状态驱动的动画
使用 Vue 的响应式数据和计算属性驱动动画：
<div :style="{ transform: `scale(${scaleValue})` }">缩放元素</div>data() {
return {
hover: false
}
},
computed: {
scaleValue() {
return this.hover ? 1.2 : 1;
}
}这些方法可以单独使用或组合使用，根据项目需求选择最适合的实现方式。
