Vue 3 动画：Transition 与 CSS 动画

Vue 3 提供了强大的动画支持，主要通过 <Transition> 组件和 CSS 动画实现。以下是详细解析：

一、Transition 组件核心机制

<Transition> 是 Vue 3 的内置组件，自动在元素进入/离开 DOM 时应用动画类名：

<Transition name="fade">
  <div v-if="show">内容</div>
</Transition>

• 类名生命周期：
  • 进入阶段：v-enter-from → v-enter-active → v-enter-to
  • 离开阶段：v-leave-from → v-leave-active → v-leave-to
• name 属性：自定义类名前缀（如 name="fade" 对应 fade-enter-from）

二、CSS 过渡动画实现

通过 CSS transition 属性实现平滑状态变化：

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

特性：

• 适用于数值型属性（opacity, transform 等）
• 需定义起始/结束状态和过渡时间
• 示例：淡入淡出、滑动效果

三、CSS 关键帧动画实现

通过 @keyframes 实现复杂动画序列：

@keyframes bounce {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.bounce-enter-active {
  animation: bounce 0.8s;
}
.bounce-leave-active {
  animation: bounce 0.8s reverse;
}

优势：

• 支持多阶段动画控制
• 可实现弹跳、旋转等效果
• 通过 animation 属性调用

四、完整示例：模态框动画

<template>
  <button @click="showModal = !showModal">切换</button>
  <Transition name="modal">
    <div v-if="showModal" class="modal">
      <p>动画模态框内容</p>
    </div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>

<style>
.modal {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 进入动画 */
.modal-enter-from {
  opacity: 0;
  transform: translate(-50%, -30px);
}
.modal-enter-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 离开动画 */
.modal-leave-to {
  opacity: 0;
  transform: translate(-50%, 30px);
}
.modal-leave-active {
  transition: all 0.3s cubic-bezier(0.36, 0, 0.66, -0.56);
}
</style>

五、进阶技巧

1. 模式控制：

   <Transition mode="out-in">...</Transition>
   

   • out-in：先执行离开动画再进入
   • in-out：先执行进入动画再离开

2. JavaScript 钩子：

   <Transition
     @before-enter="onBeforeEnter"
     @enter="onEnter"
     @after-enter="onAfterEnter"
   >
   

   可结合 GSAP 等库实现复杂逻辑

3. 性能优化：

   • 优先使用 transform 和 opacity（不触发重排）
   • 避免在 enter-active/leave-active 中修改布局属性
   • 对静态元素使用 :css="false" 跳过 CSS 检测

最佳实践：简单动画用 CSS 过渡，复杂序列用关键帧动画，动态控制场景使用 JavaScript 钩子。通过组合这些特性，可轻松实现从基础到高级的交互动画效果。