当前位置：首页 > VUE

vue实现动画原理

2026-01-19 02:21:31VUE

Vue 动画实现原理

Vue 的动画系统基于 CSS 过渡和动画，同时结合了 JavaScript 钩子函数。其核心是通过内置组件 <transition> 和 <transition-group> 管理元素的进入/离开动画或列表变化动画。

触发条件

动画触发依赖于以下条件之一：

条件渲染（v-if）
条件展示（v-show）
动态组件（<component :is="...">）
组件根节点变化（通过 key 属性强制触发）

工作流程

自动嗅探目标元素是否应用了 CSS 过渡/动画 Vue 会在元素插入/删除时检查是否存在 transition 或 animation 的 CSS 定义，若有则按以下时序处理：
- 进入动画：插入元素 → 添加 v-enter-from 类 → 下一帧添加 v-enter-active → 触发 CSS 过渡 → 过渡完成后移除所有类
- 离开动画：添加 v-leave-from 类 → 下一帧添加 v-leave-active → 触发 CSS 过渡 → 动画完成后移除元素

类名规则

默认前缀为 v-，可通过 <transition name="fade"> 自定义（如 fade-enter-active）

关键类名：

.v-enter-from { /* 进入开始状态 */ }
.v-enter-active { /* 进入过渡效果 */ }
.v-enter-to { /* 进入结束状态 */ }
.v-leave-from { /* 离开开始状态 */ }
.v-leave-active { /* 离开过渡效果 */ }
.v-leave-to { /* 离开结束状态 */ }

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>

钩子函数接收元素对象和回调函数，需手动调用 done() 结束动画。

动画模式

in-out：新元素先进入，完成后旧元素离开
out-in：旧元素先离开，完成后新元素进入

列表动画

<transition-group> 用于渲染列表动画，特点：

默认渲染为 <span>，可通过 tag 属性修改
每个子元素必须有独立的 key
内置 v-move 类处理元素位置变化的过渡效果

性能优化

对纯显示/隐藏操作优先使用 v-show 而非 v-if
对复杂动画使用 requestAnimationFrame
避免在过渡期间操作 DOM

实现示例

CSS 过渡示例：

<transition name="slide">
  <div v-if="show">内容</div>
</transition>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>

JavaScript 动画示例：

vue实现动画原理

methods: {
  enter(el, done) {
    anime({
      targets: el,
      opacity: [0, 1],
      translateY: [-20, 0],
      duration: 500,
      complete: done
    });
  }
}

Vue 的动画系统通过这种声明式的方式，将 CSS 和 JavaScript 动画能力整合到响应式数据变化的框架中，实现了高效且灵活的动画效果。