编辑“︁Vue.js动画库”︁（章节）

= Vue.js动画库 =

== 介绍 ==
Vue.js动画库是Vue.js生态系统中的重要组成部分，它允许开发者通过声明式的方式为应用程序添加动画效果。Vue.js提供了内置的过渡和动画支持，同时也有许多第三方库（如Animate.css、GSAP、Motion One等）可以扩展其功能。动画库能够提升用户体验，使界面交互更加流畅和生动。

Vue.js的动画系统基于CSS过渡和JavaScript钩子，开发者可以轻松地实现进入/离开动画、列表动画以及状态驱动的动画。

== 核心概念 ==

=== 过渡（Transition） ===
Vue.js通过`<transition>`组件提供基础的过渡效果。当元素插入、更新或移除时，Vue会自动应用CSS过渡类名。

<syntaxhighlight lang="html">
<transition name="fade">
  <p v-if="show">Hello, Vue!</p>
</transition>
</syntaxhighlight>

对应的CSS：
<syntaxhighlight lang="css">
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</syntaxhighlight>

=== 动画（Animation） ===
与过渡类似，但使用CSS动画而非过渡效果：
<syntaxhighlight lang="css">
@keyframes bounce {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.bounce-enter-active {
  animation: bounce 0.5s;
}
</syntaxhighlight>

== 常用Vue.js动画库 ==

=== Animate.css ===
一个流行的CSS动画库，与Vue.js完美集成：
<syntaxhighlight lang="html">
<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <p v-if="show">Bouncing text</p>
</transition>
</syntaxhighlight>

=== GSAP ===
强大的JavaScript动画库，适合复杂动画场景：
<syntaxhighlight lang="javascript">
import { gsap } from "gsap";

export default {
  methods: {
    beforeEnter(el) {
      gsap.set(el, { opacity: 0, y: 20 });
    },
    enter(el, done) {
      gsap.to(el, { opacity: 1, y: 0, duration: 0.5, onComplete: done });
    }
  }
}
</syntaxhighlight>

=== Motion One ===
轻量级动画库，性能优异：
<syntaxhighlight lang="javascript">
import { animate } from "motion";

animate("#box", { rotate: 90 }, { duration: 1 });
</syntaxhighlight>

== 动画原理 ==
Vue.js动画基于以下生命周期：

<mermaid>
graph TD
    A[beforeEnter] --> B[enter]
    B --> C[afterEnter]
    C --> D[enterCancelled]
    A --> E[beforeLeave]
    E --> F[leave]
    F --> G[afterLeave]
    F --> H[leaveCancelled]
</mermaid>

数学上，动画可以表示为随时间变化的函数：
<math>f(t) = \begin{cases} 
easeInQuad: & t^2 \\
easeOutQuad: & t(2-t) \\
easeInOutQuad: & \begin{cases} 
2t^2 & \text{当 } 0 \leq t < 0.5 \\ 
-2t^2+4t-1 & \text{当 } 0.5 \leq t \leq 1 
\end{cases}
\end{cases}</math>

== 实际案例 ==

=== 购物车添加商品动画 ===
<syntaxhighlight lang="html">
<transition-group name="list" tag="ul">
  <li v-for="item in cartItems" :key="item.id">
    {{ item.name }}
  </li>
</transition-group>
</syntaxhighlight>

CSS:
<syntaxhighlight lang="css">
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</syntaxhighlight>

=== 页面过渡效果 ===
使用路由过渡实现页面切换动画：
<syntaxhighlight lang="javascript">
<router-view v-slot="{ Component }">
  <transition name="page" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>
</syntaxhighlight>

== 性能优化 ==
1. 优先使用CSS动画而非JavaScript动画
2. 对于复杂动画，使用`will-change`属性提示浏览器
3. 避免动画阻塞主线程，考虑使用Web Workers
4. 使用`requestAnimationFrame`替代`setTimeout`

== 进阶技巧 ==
* 使用动态过渡：根据状态改变动画类型
* 组合多个动画：使用`<transition-group>`处理列表
* 状态驱动动画：根据组件数据状态触发不同动画
* 手势动画：整合Hammer.js等库实现触摸动画

== 总结 ==
Vue.js动画库为开发者提供了强大的工具来创建丰富的用户界面体验。从简单的CSS过渡到复杂的JavaScript动画，Vue.js生态系统都能提供良好的支持。理解这些工具和技术的原理将帮助开发者构建更流畅、更具吸引力的Web应用程序。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js生态系统]]