Transition 过渡

为内容的显示与隐藏（或创建与销毁）施加过渡效果。

NOTE

仅支持包裹单个组件或元素

显示与隐藏

创建与销毁

自定义过渡

状态机

Transition 会同时根据 visible 和 “子元素是否仍然存在” 来决定当前状态：

• 当子元素存在时，visible 用来驱动 EXITED -> ENTERING -> ENTERED 和 ENTERED -> EXITING -> EXITED
• 当子元素被移除时，会先保留/缓存子元素以播放退出流程，完成后再在根节点触发 transitionend，最终进入 UNMOUNTED

stateDiagram-v2
  [*] --> UNMOUNTED: 初始无子元素
  [*] --> EXITED: 初始有子元素且 visible = false
  [*] --> ENTERED: 初始有子元素且 visible = true

  UNMOUNTED --> EXITED: 子元素出现且 visible = true
  EXITED --> ENTERING: 下一帧开始进入
  ENTERING --> ENTERED: 下一帧完成进入

  ENTERED --> EXITING: visible = false
  ENTERED --> EXITING: 子元素被移除
  ENTERING --> EXITING: visible = false
  EXITING --> EXITED: 下一帧完成退出

  ENTERING --> EXITING: 子元素被移除
  EXITED --> UNMOUNTED: emit transitionend

NOTE

EXITED 表示 “仍保留在 DOM 中，但处于退出后的隐藏状态”，而 UNMOUNTED 才代表节点已被真正卸载。

API

Transition Props

属性名	描述	类型	默认值
className	-	string	-
children	-	ReactNode | (status: TransitionStatus) => ReactNode	-
visible	-	boolean	-