11<div align =" center " >
22 <h1 >@rc-component/motion</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
54 <p >🎞️ React 动效基础组件,封装 CSS 动画、过渡和生命周期状态。</p >
65</div >
76
1716
1817## 特性
1918
20- - Declarative ` CSSMotion ` component for appear, enter, and leave states.
21- - ` CSSMotionList ` for keyed list transitions.
22- - CSS class lifecycle hooks and inline style patching callbacks.
23- - Optional deadline fallback when transition or animation events do not fire.
24- - TypeScript definitions and React ref support.
25- - 被 Ant Design 使用 components that need predictable motion lifecycles.
19+ - 用于出现、进入和离开状态的声明性 ` CSSMotion ` 组件。
20+ - ` CSSMotionList ` 用于键控列表转换。
21+ - CSS 类生命周期挂钩和内联样式修补回调。
22+ - 当过渡或动画事件未触发时,可以使用 ` deadline ` 兜底。
23+ - TypeScript 定义和 React ref 支持。
24+ - 被 Ant Design 使用需要可预测运动生命周期的组件。
2625
2726## 安装
2827
@@ -77,50 +76,50 @@ npm start
7776
7877| 参数 | 类型 | 默认值 | 说明 |
7978| --- | --- | --- | --- |
80- | children | ` (props, ref) => ReactElement ` | - | Render function that receives motion class, style, and ref. |
81- | forceRender | ` boolean ` | ` false ` | Keep the element rendered even when invisible. |
82- | leavedClassName | ` string ` | - | Class name applied after leave when the element remains. |
83- | motionAppear | ` boolean ` | ` true ` | Enable appear motion. |
84- | motionDeadline | ` number ` | - | Fallback timeout in milliseconds for motion completion. |
85- | motionEnter | ` boolean ` | ` true ` | Enable enter motion. |
86- | motionLeave | ` boolean ` | ` true ` | Enable leave motion. |
87- | motionLeaveImmediately | ` boolean ` | - | Trigger leave immediately after mount. |
88- | motionName | ` string \| MotionName ` | - | CSS class name prefix or per-phase class names. |
89- | removeOnLeave | ` boolean ` | ` true ` | Remove the element after leave. Ignored when ` forceRender ` is set. |
90- | visible | ` boolean ` | ` true ` | Controls whether the element is visible. |
91- | onAppearActive | ` MotionEventHandler ` | - | Triggered during appear active phase. |
92- | onAppearEnd | ` MotionEndEventHandler ` | - | Triggered when appear finishes. Return ` false ` to keep waiting. |
93- | onAppearPrepare | ` MotionPrepareEventHandler ` | - | Prepare callback before appear starts. |
94- | onAppearStart | ` MotionEventHandler ` | - | Triggered when appear starts. |
95- | onEnterActive | ` MotionEventHandler ` | - | Triggered during enter active phase. |
96- | onEnterEnd | ` MotionEndEventHandler ` | - | Triggered when enter finishes. Return ` false ` to keep waiting. |
97- | onEnterPrepare | ` MotionPrepareEventHandler ` | - | Prepare callback before enter starts. |
98- | onEnterStart | ` MotionEventHandler ` | - | Triggered when enter starts. |
99- | onLeaveActive | ` MotionEventHandler ` | - | Triggered during leave active phase. |
100- | onLeaveEnd | ` MotionEndEventHandler ` | - | Triggered when leave finishes. Return ` false ` to keep waiting. |
101- | onLeavePrepare | ` MotionPrepareEventHandler ` | - | Prepare callback before leave starts. |
102- | onLeaveStart | ` MotionEventHandler ` | - | Triggered when leave starts. |
103- | onVisibleChanged | ` (visible: boolean) => void ` | - | Triggered after the final visible state changes. |
79+ | children们 | ` (props, ref) => ReactElement ` | - | 接收运动类、样式和引用的渲染函数。 |
80+ | forceRender | ` boolean ` | ` false ` | 即使元素不可见也保持渲染。 |
81+ | leavedClassName | ` string ` | - | 当元素保留时,在离开后应用className称。 |
82+ | motionAppear | ` boolean ` | ` true ` | 启用出现运动。 |
83+ | motionDeadline | ` number ` | - | 运动完成的回退超时(以毫秒为单位)。 |
84+ | motionEnter | ` boolean ` | ` true ` | 启用进入运动。 |
85+ | motionLeave | ` boolean ` | ` true ` | 启用离开动作。 |
86+ | motionLeaveImmediately | ` boolean ` | - | 安装后立即触发离开。 |
87+ | motionName | ` string \| MotionName ` | - | CSS className前缀或每阶段className。 |
88+ | removeOnLeave | ` boolean ` | ` true ` | 离开后删除该元素。设置 ` forceRender ` 时忽略。 |
89+ | 可见的 | ` boolean ` | ` true ` | 控制元素是否可见。 |
90+ | onAppearActive | ` MotionEventHandler ` | - | 在出现活跃阶段期间触发。 |
91+ | onAppearEnd | ` MotionEndEventHandler ` | - | 出现完成时触发。返回 ` false ` 继续等待。 |
92+ | onAppearPrepare | ` MotionPrepareEventHandler ` | - | 在出现开始之前准备回调。 |
93+ | onAppearStart | ` MotionEventHandler ` | - | 出现开始时触发。 |
94+ | onEnterActive | ` MotionEventHandler ` | - | 在进入活动阶段期间触发。 |
95+ | onEnterEnd | ` MotionEndEventHandler ` | - | 输入完成时触发。返回 ` false ` 继续等待。 |
96+ | onEnterPrepare | ` MotionPrepareEventHandler ` | - | 在输入开始之前准备回调。 |
97+ | onEnterStart | ` MotionEventHandler ` | - | 输入开始时触发。 |
98+ | onLeaveActive | ` MotionEventHandler ` | - | 在离开活动阶段触发。 |
99+ | onLeaveEnd | ` MotionEndEventHandler ` | - | 休假结束时触发。返回 ` false ` 继续等待。 |
100+ | onLeavePrepare | ` MotionPrepareEventHandler ` | - | 在休假开始前准备回调。 |
101+ | onLeaveStart | ` MotionEventHandler ` | - | 休假开始时触发。 |
102+ | onVisibleChanged | ` (visible: boolean) => void ` | - | 最终可见状态改变后触发。 |
104103
105104### CSSMotionList
106105
107- ` CSSMotionList ` accepts the motion props above, except ` children ` is a list render function.
106+ ` CSSMotionList ` 接受上述动画属性,但 ` children ` 是列表渲染函数。
108107
109108| 参数 | 类型 | 默认值 | 说明 |
110109| --- | --- | --- | --- |
111- | children | ` (props, ref) => ReactElement ` | - | Render function for each keyed item. |
110+ | children们 | ` (props, ref) => ReactElement ` | - | 每个关键项目的渲染函数。 |
112111| component | ` string \| ComponentType \| false ` | ` div ` | Wrapper component. Use ` false ` for no wrapper. |
113112| keys | ` (React.Key \| { key: React.Key })[] ` | - | Keys to animate. |
114- | onAllRemoved | ` () => void ` | - | Triggered after every leaving item is removed. |
115- | onVisibleChanged | ` (visible, info: { key: React.Key }) => void ` | - | Triggered after an item visibility changes. |
113+ | onAllRemoved | ` () => void ` | - | 在移除每个留下的项目后触发。 |
114+ | onVisibleChanged | ` (visible, info: { key: React.Key }) => void ` | - | 项目可见性更改后触发。 |
116115
117116### Ref
118117
119118| Ref method | 类型 | 说明 |
120119| --- | --- | --- |
121- | ` enableMotion ` | ` () => boolean ` | Whether motion is currently enabled. |
122- | ` inMotion ` | ` () => boolean ` | Whether the element is in a motion lifecycle. |
123- | ` nativeElement ` | ` HTMLElement ` | Current DOM element. |
120+ | ` enableMotion ` | ` () => boolean ` | 当前是否启用运动。 |
121+ | ` inMotion ` | ` () => boolean ` | 元素是否处于运动生命周期中。 |
122+ | ` nativeElement ` | ` HTMLElement ` | 当前 DOM 元素。 |
124123
125124## 本地开发
126125
@@ -139,11 +138,11 @@ npm run build
139138npm run prepublishOnly
140139```
141140
142- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
141+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
143142
144143## 许可证
145144
146- @rc-component/motion is released under the [ MIT] ( ./LICENSE.md ) license.
145+ @rc-component/motion 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
147146
148147[ npm-image ] : https://img.shields.io/npm/v/@rc-component/motion.svg?style=flat-square
149148[ npm-url ] : https://npmjs.org/package/@rc-component/motion
0 commit comments