vue中实现动画
Vue 中实现动画的方法
Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。
使用 Vue 内置过渡
Vue 的 <transition> 和 <transition-group> 组件可以方便地为元素添加进入/离开的过渡效果。通过 CSS 类名或 JavaScript 钩子实现动画。
<transition name="fade">
<p v-if="show">Hello Vue</p>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}使用 CSS 动画
可以直接在 Vue 组件的样式中定义 CSS 动画，并通过类名或内联样式触发。
<div class="bounce" v-if="show">Bouncing text</div>.bounce {
animation: bounce 0.5s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}使用 JavaScript 动画库
可以集成第三方动画库如 GSAP、Anime.js 或 Velocity.js，通过 Vue 的生命周期钩子或方法调用实现更复杂的动画。
import gsap from 'gsap';
export default {
methods: {
animateBox() {
gsap.to('.box', { duration: 1, x: 100, rotation: 360 });
}
}
}使用 Vue 过渡的 JavaScript 钩子
通过 <transition> 组件的 JavaScript 钩子（如 beforeEnter、enter、afterEnter 等）可以更精细地控制动画。
export default {
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
duration: 1,
onComplete: 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);
}状态驱动的动画
通过响应式数据驱动动画，可以使用计算属性或侦听器动态改变样式。
export default {
data() {
return {
progress: 0
};
},
computed: {
progressStyle() {
return {
width: `${this.progress}%`,
transition: 'width 0.3s ease'
};
}
}
}<div class="progress-bar" :style="progressStyle"></div>路由过渡
在 Vue Router 中，可以为路由切换添加过渡效果，通常结合 <transition> 组件使用。
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>第三方组件库的动画
许多 Vue UI 库（如 Element UI、Vuetify 等）提供了预设的动画组件，可以直接使用。
<el-collapse-transition>
<div v-show="show">Collapse content</div>
</el-collapse-transition>
