vue 实现动画
Vue 动画实现方法
Vue 提供了多种方式实现动画效果，包括内置组件、CSS 过渡/动画以及第三方库集成。
使用 <transition> 组件
Vue 内置的 <transition> 组件可以为元素添加进入/离开过渡效果：
<transition name="fade">
<p v-if="show">动画内容</p>
</transition>对应的 CSS 样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}使用 CSS 动画
通过定义 CSS 动画并应用于 Vue 组件：
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
.bounce-enter-active {
animation: bounce 1s;
}列表过渡
使用 <transition-group> 实现列表项动画：
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>JavaScript 钩子
通过 JavaScript 钩子实现更复杂的动画逻辑：
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<div v-if="show">内容</div>
</transition>
methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
}
}第三方动画库
集成如 Animate.css 或 GSAP 等动画库：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<p v-if="show">内容</p>
</transition>状态驱动的动画
使用 Vue 的响应式系统和计算属性驱动动画：
data() {
return {
progress: 0
}
},
computed: {
progressStyle() {
return {
width: `${this.progress}%`,
transition: 'width 0.3s ease'
}
}
}性能优化建议
- 优先使用 CSS 动画而非 JavaScript 动画
- 对 transform 和 opacity 属性进行动画以获得最佳性能
- 避免在动画期间触发布局变化
- 使用 will-change 属性提示浏览器优化
常见动画模式
- 淡入淡出：通过 opacity 变化实现
- 滑动：通过 transform: translate 实现
- 缩放：通过 transform: scale 实现
- 旋转：通过 transform: rotate 实现
- 弹性动画：使用 cubic-bezier 曲线或弹簧物理模拟
