在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

vuejs/core

菜单

过渡效果

相关源文件

Vue.js 的过渡系统提供了一种强大的方式来在元素进入或离开 DOM 时应用动画和视觉效果。本页面记录了过渡组件、它们的实现以及它们如何与 Vue.js 的渲染系统交互。有关导航过渡和基于路由的动画的信息，请参阅 Router 文档。

过渡组件概览

Vue.js 提供了两个主要的过渡组件

  1. Transition - 用于在单个元素/组件进入/离开 DOM 时进行动画处理
  2. TransitionGroup - 用于为具有移动过渡的元素/组件列表进行动画处理

这两个组件都基于一个名为 BaseTransition 的核心实现。

来源

过渡架构与生命周期

过渡系统通过将过渡钩子附加到 VNodes（虚拟 DOM 节点）并在过渡的特定阶段应用 CSS 类来工作。以下是过渡的生命周期：

来源

BaseTransition 组件

BaseTransition 是平台无关的核心，负责过渡状态管理并提供组件生命周期钩子。它实现于 runtime-core 包中，是 Transition 和 TransitionGroup 的基础。

主要功能

  • 跟踪过渡状态（进入中，离开中，已挂载）
  • 管理过渡模式（“in-out”，“out-in”，默认）
  • 协调过渡钩子
  • 处理中断过渡的取消

Props 和 Hooks

BaseTransitionProps:
- mode: 'in-out' | 'out-in' | 'default'
- appear: boolean
- persisted: boolean

Hooks:
- onBeforeEnter/Leave/Appear
- onEnter/Leave/Appear
- onAfterEnter/Leave/Appear
- onEnterCancelled/LeaveCancelled/AppearCancelled

来源

Transition 组件

The Transition 组件扩展了 BaseTransition，增加了特定于 DOM 的功能，用于 CSS 动画和过渡。

CSS 类名命名约定

对于名为“slide”的过渡

当未提供名称时，将使用前缀“v-”（例如，“v-enter-from”）。

Props

除了继承所有 BaseTransition 的 props 外，Transition 还增加了

- name: string
- type: 'transition' | 'animation'
- css: boolean
- duration: number | { enter: number, leave: number }
- enterFromClass/ActiveClass/ToClass
- leaveFromClass/ActiveClass/ToClass
- appearFromClass/ActiveClass/ToClass

来源

TransitionGroup 组件

TransitionGroup 将过渡功能扩展到处理列表元素，并支持项目位置更改时的移动过渡。

主要功能

  • 元素进入、离开和移动的过渡
  • 自动检测位置变化
  • 应用 CSS transforms 进行移动过渡
  • 要求元素具有唯一的 key 属性

移动过渡实现

  1. 当列表中的项目更改位置时
    • 记录所有元素的初始位置
    • 将更改应用到 DOM
    • 记录新位置
    • 计算初始位置和新位置之间的差值
    • 应用 CSS transforms 来创建移动的错觉
    • 强制重排以触发过渡
    • 过渡完成后移除 transforms

来源

过渡钩子集成

过渡系统通过附加到 VNodes 的钩子与 Vue.js 的渲染管线集成。

来源

过渡检测与时序

对于 CSS 过渡，Vue 会自动检测过渡何时完成，方法是：

  1. 检查计算样式中的 transition/animation 属性
  2. 监听 transitionend 或 animationend 事件
  3. 在必要时使用备用超时

来源

过渡模式

Vue 的过渡系统支持三种模式，用于控制进入和离开过渡之间的时间安排：

  1. 默认模式：进入和离开过渡同时发生
  2. out-in 模式：当前元素在新元素进入之前完成离开
  3. in-out 模式：新元素在当前元素离开之前完成进入

来源

与其他组件的集成

过渡与 Vue.js 的其他组件集成，提供无缝的动画功能

KeepAlive 集成

当 Transition 与 KeepAlive 一起使用时，过渡发生在激活/停用时，而不是挂载/卸载时。

来源

性能考量

过渡系统设计高效，具有多项优化措施：

  1. CSS 过渡比 JavaScript 过渡更受青睐，以提高性能
  2. 过渡钩子只在需要时生成
  3. DOM 操作使用 requestAnimationFrame 进行批处理
  4. 过渡类被跟踪以避免覆盖用户应用的类

来源

结论

Vue 的过渡系统提供了一种强大而易于使用的动画方式，可以为您的应用程序添加动态效果。它建立在强大的架构之上，该架构与 Vue 的渲染系统深度集成，同时提供了高级抽象，使得实现常见的过渡模式变得简单。

该系统智能地处理 CSS 和 JavaScript 动画，协调动画的时序，并与 KeepAlive 和条件渲染等其他 Vue 功能集成。