Transition 组件简介

📋 定义

<Transition> 是 Vue 3 内置的动画组件，用于在元素/组件进入/离开 DOM 时应用动画效果。

🎯 核心功能

为元素的显示/隐藏、条件渲染、动态组件切换等场景提供平滑的动画过渡。

💡 基本用法

<template>
  <button @click="show = !show">切换</button>

  <Transition name="fade">
    <p v-if="show">你好，世界！</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style>
/* CSS 过渡类 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

🔧 核心特性

1. 自动应用 CSS 类

进入动画：
v-if 从 false → true
.fade-enter-from    (初始状态)
.fade-enter-active  (动画进行中)
.fade-enter-to      (最终状态)

离开动画：
v-if 从 true → false  
.fade-leave-from    (初始状态)
.fade-leave-active  (动画进行中)
.fade-leave-to      (最终状态)

2. 支持多种触发方式

<!-- v-if 控制 -->
<Transition>
  <div v-if="show">内容</div>
</Transition>

<!-- v-show 控制 -->
<Transition>
  <div v-show="show">内容</div>
</Transition>

<!-- 动态组件 -->
<Transition>
  <component :is="currentComponent" />
</Transition>

📊 常用属性

🔄 动画模式 (mode)

1. 默认模式 (同时进行)

<Transition>
  <!-- 新旧元素同时动画 -->
</Transition>

2. out-in (先出后进)

<Transition mode="out-in">
  <!-- 旧元素先离开，新元素再进入 -->
  <!-- 避免内容重叠 -->
</Transition>

3. in-out (先进后出)

<Transition mode="in-out">
  <!-- 新元素先进入，旧元素再离开 -->
</Transition>

⚡ CSS 动画类

基本过渡

/* 淡入淡出 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

滑动效果

/* 从右侧滑入 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

📈 JavaScript 钩子

通过 JS 控制动画

<template>
  <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @enter-cancelled="onEnterCancelled"
    @before-leave="onBeforeLeave"
    @leave="onLeave"
    @after-leave="onAfterLeave"
    @leave-cancelled="onLeaveCancelled"
  >
    <div v-if="show">内容</div>
  </Transition>
</template>

<script setup>
// 动画钩子
const onEnter = (el, done) => {
  // 使用 GSAP、anime.js 等库
  anime({
    targets: el,
    opacity: [0, 1],
    duration: 300,
    easing: 'easeInOutSine',
    complete: done
  })
}
</script>

🎯 TransitionGroup

列表动画

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>

<style>
/* 列表项动画 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* 离开时让出位置 */
.list-leave-active {
  position: absolute;
}
</style>

💡 性能优化

1. 使用 transform 和 opacity

/* ✅ 性能好：GPU 加速 */
.transition-enter-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ❌ 性能差：触发布局重绘 */
.transition-enter-active {
  transition: width 0.3s ease, height 0.3s ease;
}

2. 减少动画元素数量

<!-- 避免在大量元素上使用复杂动画 -->
<TransitionGroup>
  <!-- 如果列表很长，考虑只对可见项动画 -->
</TransitionGroup>

📋 总结

<Transition> 组件：

1. ✅ Vue 3 内置：无需额外安装
2. ✅ 自动管理：自动应用/移除 CSS 类
3. ✅ 灵活配置：支持 CSS/JS 动画
4. ✅ 多种场景：条件渲染、动态组件、列表
5. ✅ 性能优化：支持硬件加速