Vue中常见动画执行详解

Vue 提供了丰富的动画功能，包括 CSS 过渡、CSS 动画、JavaScript 动画、Vue 内置的 transition 组件 以及 第三方动画库（如 Animate.css、GSAP）。在 Vue 2 和 Vue 3 中，动画的使用方式基本一致，但 Vue 3 进行了优化，提高了性能和扩展性。

本文将详细介绍 Vue 中动画的应用，包括：

1. Vue 内置过渡 & 动画
2. 自定义 CSS 动画
3. JavaScript 过渡
4. 列表过渡
5. Vue 与第三方动画库

---

1. Vue 内置动画：transition 组件

Vue 提供了 transition 组件，可以对单个元素或组件应用进入/离开过渡效果。

1.1 基本过渡

Vue 默认提供的 6 个 CSS 过渡类：

• v-enter-from（进入前的起始状态）
• v-enter-active（进入中的动画）
• v-enter-to（进入后的状态）
• v-leave-from（离开前的状态）
• v-leave-active（离开中的动画）
• v-leave-to（离开后的状态）

示例：淡入淡出

<template>
  <div>
    <button @click="show = !show">切换显示</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue 动画！</p>
    </transition>
  </div>
</template>

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

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

🔹 解析：

• v-if="show" 控制 p 标签的显示与隐藏
• fade 作为 transition 组件的 name，Vue 会自动应用 .fade-* 规则
• 进入动画（fade-enter-*）和离开动画（fade-leave-*）使 p 元素 渐隐渐显

---

1.2 自定义过渡名称

可以通过 name 属性自定义过渡类名，例如：

<transition name="slide">
  <p v-if="show">Hello Vue 动画</p>
</transition>

<style>
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-to {
  transform: translateX(0);
}
.slide-leave-from {
  transform: translateX(0);
}
.slide-leave-to {
  transform: translateX(100%);
}
</style>

🔹 解析：

• slide-enter-from 初始状态：从 -100% 位置滑入
• slide-enter-to 结束状态：最终停留在原位
• slide-leave-from 初始状态：在原位
• slide-leave-to 结束状态：滑出 100%

---

2. CSS 动画

2.1 使用 CSS 动画

CSS 动画比过渡更加复杂，适用于更精细的效果。

<transition name="bounce">
  <p v-if="show">Vue CSS 动画</p>
</transition>

<style>
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.bounce-enter-active {
  animation: bounce 0.5s ease-in-out;
}
.bounce-leave-active {
  animation: bounce 0.5s ease-in-out reverse;
}
</style>

🔹 解析：

• animation 绑定 keyframes 关键帧动画
• reverse 让动画在 leave 时反向播放

---

3. JavaScript 过渡

Vue 允许使用 JavaScript 控制过渡，适用于复杂逻辑。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave">
  <p v-if="show">JavaScript 过渡</p>
</transition>

<script>
export default {
  data() {
    return { show: true }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      let opacity = 0
      let interval = setInterval(() => {
        opacity += 0.1
        el.style.opacity = opacity
        if (opacity >= 1) {
          clearInterval(interval)
          done() // 结束动画
        }
      }, 50)
    },
    leave(el, done) {
      let opacity = 1
      let interval = setInterval(() => {
        opacity -= 0.1
        el.style.opacity = opacity
        if (opacity <= 0) {
          clearInterval(interval)
          done()
        }
      }, 50)
    }
  }
}
</script>

🔹 解析：

• beforeEnter：初始透明度为 0
• enter：逐步增加透明度，实现淡入
• leave：逐步减少透明度，实现淡出

---

4. 列表动画

Vue 提供 transition-group 组件，实现列表过渡。

<template>
  <div>
    <button @click="addItem">添加</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<style>
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-leave-active {
  position: absolute;
}
</style>

<script>
export default {
  data() {
    return { items: [1, 2, 3] }
  },
  methods: {
    addItem() {
      this.items.push(this.items.length + 1)
    }
  }
}
</script>

🔹 解析：

• transition-group 允许多个元素同时动画
• tag="ul" 指定包裹元素
• list-leave-active 使用 position: absolute; 防止动画干扰布局

---

5. Vue 与第三方动画库

5.1 Animate.css

Animate.css 提供多种动画效果。

安装：

npm install animate.css

使用：

<transition enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__bounceOut">
  <p v-if="show">Animate.css 动画</p>
</transition>

---

5.2 GSAP 动画

GSAP 提供更丰富的动画控制。

安装：

npm install gsap

使用：

<transition @enter="onEnter" @leave="onLeave">
  <p v-if="show">GSAP 动画</p>
</transition>

<script>
import gsap from 'gsap'

export default {
  methods: {
    onEnter(el, done) {
      gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 1, onComplete: done })
    },
    onLeave(el, done) {
      gsap.to(el, { opacity: 0, duration: 1, onComplete: done })
    }
  }
}
</script>

---

Vue 提供了强大的动画系统，包括内置过渡、CSS 动画、JavaScript 过渡、列表动画及第三方库支持，开发者可以根据需求选择最佳方案。

---

Vue 动画的最佳选择取决于具体的需求，下面是不同方案的对比和推荐：

动画方案	适用场景	优点	缺点
CSS 过渡（transition）	简单的显隐、滑动、淡入淡出	轻量级，性能高	复杂动画难以控制
CSS 动画（@keyframes）	旋转、缩放、弹跳等	适合循环或精细动画	复杂控制较难
JavaScript 过渡	复杂的交互动画	灵活度高，可动态计算	代码量较大
transition-group	列表增删动画	专门为列表设计，API 友好	需处理布局干扰
Animate.css	快速应用常见动画	易用，动画丰富	不支持自定义复杂动画
GSAP	高度复杂的动画	强大控制能力，支持时间轴	额外学习成本，文件较大

---

最佳选择分析

✅ 如果你要实现：

1. 简单的淡入淡出、滑动 → 推荐 transition 组件 + CSS 过渡
   ✅ 优势：代码少，性能高，维护简单

2. 复杂的旋转、缩放、弹跳 → 推荐 CSS @keyframes
   ✅ 优势：流畅、无需 JavaScript

3. 基于交互的动画（如手势拖动、动态计算） → 推荐 JavaScript 过渡
   ✅ 优势：可以基于状态进行更精细的控制

4. 列表的添加删除动画 → 推荐 transition-group
   ✅ 优势：Vue 内置支持，无需额外逻辑

5. 快速应用炫酷动画 → 推荐 Animate.css
   ✅ 优势：直接引入类名使用，动画丰富

6. 高级、复杂动画（多元素组合、时间轴控制） → 推荐 GSAP
   ✅ 优势：可实现复杂动画效果，控制精细

---

最终推荐

如果动画需求不复杂（如按钮动画、淡入淡出），首选 Vue 内置的 transition + CSS 过渡，性能最好，代码最简洁。
如果需要更复杂的动画（如页面过渡、交互动画），可以考虑 GSAP。
如果只是想快速实现一些炫酷动画，可以使用 Animate.css。