#过渡与动画 (Transition)

#1. 基本用法 (CSS)

Vue 提供了 <Transition> 组件来处理进入/离开过渡。

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

Vue 会自动在适当的时机添加/移除 CSS 类名：

1. v-enter-from: 进入开始。
2. v-enter-active: 进入过程中 (定义 transition 属性)。
3. v-enter-to: 进入结束。
4. v-leave-from / v-leave-active / v-leave-to.

#2. 列表过渡 (Group)

使用 <TransitionGroup>。

• 这也支持 v-move 类名，用于处理列表项改变位置时的平滑移动动画（Vue 使用 FLIP 技术实现）。
• 注意：列表项必须有唯一的 key。

#3. JavaScript 钩子

可以使用 JS 钩子绑定动画库 (GSAP, Velocity)。

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  :css="false"> <!-- 跳过 CSS 检测 -->

#4. 性能建议

• 尽量使用 transform 和 opacity 做动画，避免触发重排 (Reflow)。
• 对于复杂列表动画，考虑性能开销。