vue平时如何实现动画
使用 Vue 内置过渡组件
Vue 提供了 <transition> 和 <transition-group> 组件，用于实现元素进入/离开的动画效果。通过 CSS 类名或 JavaScript 钩子函数控制动画过程。
CSS 过渡示例
<transition name="fade">
<p v-if="show">淡入淡出的内容</p>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}JavaScript 钩子示例
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<p v-if="show">通过钩子控制的动画</p>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
duration: 500,
complete: done
});
},
leave(el, done) {
anime({
targets: el,
opacity: 0,
duration: 500,
complete: done
});
}
}结合 CSS 动画库
直接使用 Animate.css 等现成动画库，通过 <transition> 的 enter-active-class 和 leave-active-class 属性快速应用动画。
<transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<p v-if="show">Animate.css 动画</p>
</transition>使用 JavaScript 动画库
通过 GreenSock (GSAP) 或 anime.js 实现复杂动画，通常在 Vue 的 mounted 或方法中调用动画库 API。
GSAP 示例
mounted() {
gsap.to(this.$refs.box, {
x: 100,
duration: 1,
repeat: -1,
yoyo: true
});
}组件状态驱动的动画
利用 Vue 的响应式数据和计算属性，动态绑定样式或类名实现动画效果。例如根据数据变化改变元素位置或大小。
<div
class="box"
:style="{ transform: `scale(${scale})` }"
@mouseover="scale = 1.2"
@mouseleave="scale = 1"
></div>data() {
return {
scale: 1
};
}第三方 Vue 动画插件
使用 vue-use-gesture 或 vue-kinesis 等插件实现拖拽、视差等交互动画。
vue-kinesis 示例
<kinesis-container>
<kinesis-element strength="10">
视差滚动效果
</kinesis-element>
</kinesis-container>性能优化建议
- 优先使用 CSS 动画而非 JavaScript 动画以提高性能。
- 对频繁变化的动画使用
transform和opacity属性，触发硬件加速。 - 复杂动画考虑使用
requestAnimationFrame或 Web Workers 避免阻塞主线程。
