vue 动画 实现
Vue 动画实现方法
Vue 提供了多种方式实现动画效果，包括内置过渡组件、CSS 动画库集成以及 JavaScript 动画库结合。以下是常见的实现方法：
使用 Vue 内置过渡组件
Vue 的 <transition> 和 <transition-group> 组件可以方便地为元素添加进入/离开动画。通过 CSS 类名或 JavaScript 钩子实现动画效果。
<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 动画库如 Animate.css，通过 <transition> 组件的 enter-active-class 和 leave-active-class 属性应用预定义动画。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>使用 JavaScript 动画库
对于更复杂的动画场景，可以结合 GSAP 或 Anime.js 等 JavaScript 动画库。通过 Vue 的过渡 JavaScript 钩子实现精细控制。
<transition
@enter="enterEl"
@leave="leaveEl"
>
<div v-if="show">内容</div>
</transition>
methods: {
enterEl(el, done) {
gsap.from(el, {
duration: 0.5,
opacity: 0,
y: 50,
onComplete: done
});
},
leaveEl(el, done) {
gsap.to(el, {
duration: 0.5,
opacity: 0,
y: -50,
onComplete: done
});
}
}列表动画实现
对于列表项的动画效果，可以使用 <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 0.5s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-move {
transition: transform 0.5s;
}状态动画实现
对于基于状态变化的动画，可以使用 Vue 的响应式系统和计算属性结合 CSS 过渡或动画。
<div
class="box"
:style="{ transform: `rotate(${angle}deg)` }"
></div>
<button @click="angle += 45">旋转</button>对应的 CSS 样式：
.box {
transition: transform 0.5s ease;
width: 100px;
height: 100px;
background: #42b983;
}动画性能优化建议
- 优先使用 CSS 动画而非 JavaScript 动画
- 对动画元素使用
will-change属性提升性能 - 避免动画过程中触发重排操作
- 对复杂动画使用
requestAnimationFrame - 考虑使用
transform和opacity属性实现动画，它们不会触发重排
以上方法涵盖了 Vue 中实现动画的主要技术方案，可以根据具体需求选择合适的方式。
