编辑“︁Vue.js CSS动画”︁

= Vue.js CSS动画 =

== 介绍 ==
Vue.js 提供了强大的过渡与动画系统，其中 '''CSS动画''' 是实现动态效果的核心方式之一。通过 Vue 的 `<transition>` 组件，开发者可以轻松地为元素的进入（enter）、离开（leave）以及列表的变动添加平滑的动画效果。CSS 动画基于 CSS 的 `@keyframes` 和 `transition` 属性，结合 Vue 的生命周期钩子，实现丰富的交互体验。

== 基本工作原理 ==
Vue.js 的 CSS 动画依赖于以下机制：
* 当元素插入或移除时，Vue 会自动检测是否应用了 `<transition>` 组件。
* Vue 会在适当的时机添加/删除特定的 CSS 类名（如 `v-enter`、`v-enter-active`），开发者只需定义这些类名的样式即可。
* 动画的生命周期包括 **进入（enter）** 和 **离开（leave）** 两个阶段，每个阶段又分为 **开始（from）** 和 **结束（to）** 状态。

以下是 Vue.js 动画类名的默认命名规则：
<mermaid>
stateDiagram-v2
    [*] --> v-enter-from
    v-enter-from --> v-enter-to
    v-enter-to --> v-enter-active
    v-enter-active --> [*]
    [*] --> v-leave-from
    v-leave-from --> v-leave-to
    v-leave-to --> v-leave-active
    v-leave-active --> [*]
</mermaid>

== 基础示例 ==
以下是一个简单的 CSS 过渡动画示例，展示如何让一个元素淡入淡出：

<syntaxhighlight lang="html">
<template>
  <button @click="show = !show">切换显示</button>
  <transition name="fade">
    <p v-if="show">这是一个动画效果示例</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
</style>
</syntaxhighlight>

'''输出效果：'''
* 点击按钮时，文本会以 0.5 秒的淡入/淡出效果显示或隐藏。

'''代码解释：'''
1. `<transition name="fade">` 定义了一个名为 "fade" 的过渡效果。
2. `.fade-enter-from` 和 `.fade-leave-to` 定义了动画的起始和结束状态（透明度为 0）。
3. `.fade-enter-active` 和 `.fade-leave-active` 定义了动画的持续时间和缓动函数。

== 使用 CSS @keyframes ==
除了 `transition`，还可以使用 `@keyframes` 创建更复杂的动画：

<syntaxhighlight lang="html">
<template>
  <button @click="show = !show">触发动画</button>
  <transition name="bounce">
    <p v-if="show">弹跳效果</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>
</syntaxhighlight>

'''输出效果：'''
* 文本会以缩放弹跳的方式出现，消失时反向播放动画。

== 自定义过渡类名 ==
Vue 允许覆盖默认的类名，以便与第三方动画库（如 Animate.css）集成：

<syntaxhighlight lang="html">
<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <p v-if="show">使用 Animate.css</p>
</transition>
</syntaxhighlight>

== 实际应用场景 ==
1. '''页面路由切换'''：为路由视图添加滑动或淡入淡出效果。
2. '''表单验证'''：错误提示以动画形式出现。
3. '''动态列表'''：列表项添加/删除时使用动画提升用户体验。

=== 案例：列表排序动画 ===
<syntaxhighlight lang="html">
<template>
  <button @click="shuffle">随机排序</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    shuffle() {
      this.items.sort(() => Math.random() - 0.5)
    }
  }
}
</script>

<style>
.list-move {
  transition: transform 0.8s ease;
}
</style>
</syntaxhighlight>

'''效果说明：'''
* 点击按钮时，列表项会平滑地重新排列位置。

== 性能优化建议 ==
* 优先使用 `transform` 和 `opacity` 属性，它们不会触发重排（reflow），性能更高。
* 避免同时使用大量元素的复杂动画。
* 对于连续动画，考虑使用 `requestAnimationFrame`。

== 数学原理（可选） ==
CSS 动画的缓动函数（easing）通常基于贝塞尔曲线。例如，`ease-in-out` 的公式为：
<math>B(t) = (1-t)^3 \cdot P_0 + 3(1-t)^2t \cdot P_1 + 3(1-t)t^2 \cdot P_2 + t^3 \cdot P_3</math>
其中 <math>P_0</math> 到 <math>P_3</math> 是控制点坐标。

== 总结 ==
Vue.js 的 CSS 动画系统提供了一种声明式的方式来实现复杂的交互效果。通过组合 `<transition>` 组件、CSS 类名和关键帧动画，开发者可以创建流畅的用户体验。理解动画的生命周期和性能优化技巧是掌握这一概念的关键。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js过渡与动画]]