vue 实现动画效果
使用 Vue Transition 组件实现动画
Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于在元素插入、更新或移除时应用动画效果。通过 CSS 过渡或 JavaScript 钩子实现动画。
<transition name="fade">
<p v-if="show">This will fade in and out</p>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}使用 CSS 动画库
可以集成第三方 CSS 动画库如 Animate.css，通过 <transition> 组件直接应用预定义的动画类。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<p v-if="show">Bouncing text</p>
</transition>使用 JavaScript 钩子实现复杂动画
通过 <transition> 的 JavaScript 钩子（如 beforeEnter、enter、afterEnter 等）可以实现更复杂的动画逻辑，例如结合 GSAP 库。
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
duration: 1,
onComplete: done
});
}
}列表动画与 TransitionGroup
<transition-group> 用于对列表中的多个元素应用动画，每个元素需要唯一的 key。
<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);
}状态驱动的动画
通过 Vue 的响应式数据和计算属性，可以实现基于状态变化的动画效果。
computed: {
rotateValue() {
return this.isActive ? 180 : 0;
}
}<div :style="{ transform: `rotate(${rotateValue}deg)` }">
Animated Element
</div>使用 Vue 动画库
对于更高级的需求，可以使用专为 Vue 设计的动画库，如 vue-kinesis（物理动画效果）或 vue2-animate（预定义动画集合）。
<kinesis-container>
<kinesis-element :strength="10">
Moves with mouse
</kinesis-element>
</kinesis-container>
