Animation 动画 #

动画组件，提供了一些常用的动画效果，可以通过配置相关属性来实现动画效果。

获取组件 #

• Animation.Fade 淡入淡出过渡效果。
• Animation.Collapse 折叠过渡效果。
• Animation.Bounce弹入弹出过渡效果。
• Animation.Slide 滑入滑出过渡效果。
• Animation.Transition 自定义一个过渡效果。

演示 #

Fade 淡进淡出 #

Collapse 折叠展开 #

Bounce 弹入弹出 #

Slide 滑入滑出 #

Transition 自定义过渡效果 #

在 Transition 中配置以下 className, 然后自定义相关 css 动画处理。

exitedClassName="custom-exited"
exitingClassName="custom-exiting"
enteredClassName="custom-entered"
enteringClassName="custom-entering"

子元素 ref #

动画组件会保留子元素的对象 ref 和回调 ref，包括 React 19 回调 ref 返回的清理函数。同一个子元素 ref 不会因为动画状态变化而重复解绑和绑定。

const inputRef = React.useRef(null);

<Animation.Fade in transitionAppear onEntered={() => inputRef.current?.focus()}>
  <input ref={inputRef} />
</Animation.Fade>;

动画组件自身的 ref 指向 Transition 实例。使用函数形式的子元素时，需要将提供的 props 和 ref 转发给执行动画的节点。

减少动态效果 #

Animation.Fade、Animation.Collapse、Animation.Bounce、Animation.Slide 和 Animation.Transition 默认遵循系统的 prefers-reduced-motion 设置。将 reduceMotion 设为 true 可禁用动态效果；设为 false 可显式允许动画，包括系统要求减少动态效果时。

<Animation.Fade in><div>遵循系统偏好。</div></Animation.Fade>
<Animation.Bounce in reduceMotion><div>减少动态效果。</div></Animation.Bounce>
<Animation.Slide in reduceMotion={false}><div>允许动画。</div></Animation.Slide>

组件设置优先于 CustomProvider reduceMotion，全局设置优先于系统偏好。通过 CustomProvider components 配置的组件默认值遵循现有的默认属性合并规则。

减少动态效果时，仍会依次调用 onEnter、onEntering、onEntered 及对应的退出回调，无需等待 CSS 完成事件或 timeout。过渡期间启用此设置会完成当前请求；恢复动画仅影响下一次进入或退出，不会重播已完成的动画。

该设置仅移除动画节点自身的 CSS 过渡时长，并将 CSS 动画减少为零时长、零延迟的一次迭代。包括自定义循环动画在内，最终样式仍由 keyframes、动画方向及 fill mode 决定。不影响嵌套内容及其他动画。使用渲染函数作为 children 时，需要将提供的 props 和 ref 传给动画节点。服务端渲染的自动策略通过 CSS 在 hydration 前遵循系统偏好。

Props #

<Animation.Fade> #

<Animation.Collapse> #

<Animation.Bounce> #

<Animation.Slide> #

<Animation.Transition> #

Placement #

type Placement = 'top' | 'bottom' | 'right' | 'left';