vue实现的动画
Vue 动画实现方式
Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接使用 CSS 动画。以下是几种常见的实现方法：
使用 Vue 过渡系统
Vue 的 <transition> 和 <transition-group> 组件可以方便地为元素添加进入/离开过渡效果。通过在 CSS 中定义过渡类名来实现动画效果。
<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 动画，通过绑定 class 或 style 来触发动画。
<div :class="{ 'animate': isAnimated }">Animate me</div>.animate {
animation: bounce 0.5s;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}使用第三方动画库
可以集成第三方动画库如 Animate.css 或 GSAP 来实现更复杂的动画效果。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<p v-if="show">Animated text</p>
</transition>使用 JavaScript 钩子
通过 Vue 过渡的 JavaScript 钩子，可以在动画的不同阶段执行自定义 JavaScript 代码。
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div v-if="show">Hook-based animation</div>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 500, complete: done });
}
}使用 Vue 状态驱动动画
可以通过 Vue 的响应式数据驱动动画，结合计算属性和 watcher 实现动态效果。
<div :style="{ transform: `rotate(${rotation}deg)` }">Rotating div</div>data() {
return {
rotation: 0
}
},
mounted() {
setInterval(() => {
this.rotation = (this.rotation + 1) % 360;
}, 16);
}动画性能优化建议
- 优先使用 CSS 动画而非 JavaScript 动画
- 使用
transform和opacity属性实现动画，这些属性不会触发重排 - 对于复杂动画考虑使用
requestAnimationFrame - 避免频繁操作 DOM，充分利用 Vue 的虚拟 DOM
- 对于大量元素动画，使用
<transition-group>并添加v-move类
常见动画场景示例
列表排序动画
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>.list-move {
transition: transform 0.5s;
}路由过渡动画
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>数字变化动画
<animated-number :value="counter" :duration="1000" />// 使用第三方库或自定义实现数字变化动画以上方法可以根据具体需求组合使用，Vue 的灵活性允许开发者选择最适合项目需求的动画实现方式。
