以下是以资深软件开发工程师的视角，对“Vue.js 过渡 & 动画”的专业回答。我将详细讲解 Vue.js 中过渡和动画的概念、使用方法及其应用场景，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 15 日的最新信息，使用 Vue.js 3.x（最新稳定版）为参考。

Vue.js 过渡 & 动画

目录

  1. 引言
  2. Vue.js 过渡 & 动画概述
  1. 过渡基本用法
  1. 高级过渡与动画
  1. 最佳实践与注意事项
  1. 结论

1. 引言

过渡和动画是提升用户体验的重要手段，能够为界面交互增添流畅性和吸引力。Vue.js 通过内置的 <transition> 组件和灵活的 API，简化了过渡与动画的实现。本教程将从基础到高级，带你掌握 Vue.js 中的过渡与动画技术。

2. Vue.js 过渡 & 动画概述

2.1 什么是过渡与动画？

  • 过渡（Transition）：通过 CSS 属性平滑变化实现效果（如淡入淡出）。
  • 动画（Animation）：使用 CSS @keyframes 或 JavaScript 定义复杂的运动轨迹。

2.2 Vue.js 的过渡支持

  • 核心组件：<transition> 和 <transition-group>。
  • 功能：
  • 自动应用 CSS 类名控制过渡。
  • 支持 JavaScript 钩子自定义动画。
  • 参考：Vue.js 过渡与动画文档

3. 过渡基本用法

3.1 使用 <transition>

  • 语法：包裹需要过渡的元素，指定 name 属性。
  • 过渡类名：
  • v-enter-from → v-enter-to：进入过程。
  • v-leave-from → v-leave-to：离开过程。
  • v-enter-active / v-leave-active：过渡期间。

3.2 CSS 过渡

  • 示例：
<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">淡入淡出</p>
    </transition>
  </div>
</template>

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

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

3.3 实例：淡入淡出效果

以下是一个完整的淡入淡出示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Vue.js 淡入淡出</title>
  <style>
    .container { max-width: 400px; margin: 20px auto; text-align: center; }
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter-from, .fade-leave-to {
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1>淡入淡出效果</h1>
      <button @click="show = !show">切换显示</button>
      <transition name="fade">
        <p v-if="show">这是一个动态内容</p>
      </transition>
    </div>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return { show: true };
      }
    }).mount("#app");
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：点击按钮，内容以 0.5 秒淡入淡出切换。

4. 高级过渡与动画

4.1 CSS 动画

  • 语法：结合 @keyframes 定义动画。
  • 示例：
<template>
  <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.2); }
  100% { transform: scale(1); }
}
</style>

4.2 列表过渡

  • 语法：使用 <transition-group> 管理列表动画。
  • 示例：
<template>
  <div>
    <button @click="addItem">添加</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, text: "任务 1" }],
      nextId: 2
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId++, text: `任务 ${this.nextId - 1}` });
    }
  }
};
</script>

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

4.3 JavaScript 动画

  • 语法：使用钩子函数（如 beforeEnter）结合 JS 库。
  • 示例（使用 GSAP）：
<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <div v-if="show" class="box"></div>
  </transition>
</template>

<script>
import { gsap } from "https://unpkg.com/gsap@3/dist/gsap.min.js";
export default {
  data() {
    return { show: true };
  },
  methods: {
    beforeEnter(el) {
      gsap.set(el, { scale: 0, opacity: 0 });
    },
    enter(el, done) {
      gsap.to(el, {
        scale: 1,
        opacity: 1,
        duration: 0.5,
        onComplete: done
      });
    },
    leave(el, done) {
      gsap.to(el, {
        scale: 0,
        opacity: 0,
        duration: 0.5,
        onComplete: done
      });
    }
  }
};
</script>

<style>
.box { width: 100px; height: 100px; background: #42b983; }
</style>

5. 最佳实践与注意事项

5.1 动画设计

  • 适度使用：避免过度动画分散用户注意力。
  • 一致性：保持动画风格统一，提升体验。

5.2 性能优化与调试

  • 性能：优先使用 CSS 过渡（GPU 加速），避免 JS 高频动画。
  • 调试：使用浏览器开发者工具分析动画性能，结合 Vue Devtools 检查过渡触发。

6. 结论

Vue.js 的过渡与动画通过 <transition> 和 <transition-group> 提供了简单而强大的实现方式，支持 CSS 和 JS 动画。本文通过淡入淡出实例展示了其用法，帮助你掌握过渡与动画的核心技术。如果想深入学习，可参考 实例：淡入淡出效果 或访问 Vue.js 过渡与动画文档。

回答特点

  • 结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
  • 实用性：覆盖基础到高级用法，适合初学者和开发者。
  • 内部链接：通过 <a href="#ID"> 跳转，如 过渡基本用法。
  • 出站链接：嵌入正文，如 Vue.js 过渡与动画文档。

如何运行

  1. 使用 CDN 方式，将示例代码保存为 HTML 文件并打开。
  2. 或在 Vue CLI 项目中创建组件测试功能（需额外引入 GSAP 等库）。

请确认此回答是否符合你的期望，或者提出下一个问题，我将继续按此格式回答！