vue过渡动画实现原理

Vue过渡动画的实现原理

Vue的过渡动画主要通过<transition>和<transition-group>组件实现，核心原理涉及CSS过渡/动画和JavaScript钩子函数的结合。

CSS过渡与动画

Vue会自动检测目标元素是否应用了CSS过渡或动画，并在适当的时机添加/移除CSS类名。当元素插入或删除时，Vue会按照以下顺序处理类名：

1. v-enter/v-enter-from: 进入动画的起始状态（Vue 2.x为v-enter，3.x为v-enter-from）
2. v-enter-active: 进入动画的激活状态，定义过渡持续时间/缓动函数
3. v-enter-to: 进入动画的结束状态（Vue 2.x无此阶段）
4. v-leave/v-leave-from: 离开动画的起始状态
5. v-leave-active: 离开动画的激活状态
6. v-leave-to: 离开动画的结束状态

例如定义一个淡入淡出效果：

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

JavaScript钩子函数

当需要更复杂的动画控制时，可以使用JavaScript钩子：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- 内容 -->
</transition>

每个钩子函数接收元素作为参数，enter和leave还会接收done回调，用于明确动画结束时机。

过渡模式

Vue提供两种过渡模式：

• in-out: 新元素先过渡进入，完成后当前元素过渡离开
• out-in: 当前元素先过渡离开，完成后新元素过渡进入

<transition mode="out-in">
  <!-- 动态组件或元素 -->
</transition>

列表过渡

<transition-group>用于多个元素的过渡，特点包括：

• 渲染为实际DOM元素（默认为<span>）
• 每个元素必须有独立的key
• 过渡类名会应用于内部元素而非容器本身

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

性能优化建议

1. 优先使用CSS动画而非JavaScript动画
2. 对transform和opacity属性做动画，它们不会触发重排
3. 避免在过渡期间操作DOM，可能打断动画
4. 对大量元素动画考虑使用requestAnimationFrame

Vue的过渡系统通过与浏览器的渲染机制协同工作，在不同生命周期阶段自动应用类名或调用钩子，开发者只需关注动画效果的实现细节。