Skip to content

Commit 49a5d96

Browse files
committed
docs: refine bilingual README branding
1 parent e9ccf02 commit 49a5d96

2 files changed

Lines changed: 41 additions & 43 deletions

File tree

README.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div align="center">
22
<h1>@rc-component/motion</h1>
3-
<p><sub>Part of the Ant Design ecosystem.</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;" /> Part of the Ant Design ecosystem.</sub></p>
54
<p>🎞️ Lifecycle-driven motion primitives for React enter, leave, and list animations.</p>
65
</div>
76

README.zh-CN.md

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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

@@ -17,12 +16,12 @@
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
139138
npm 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

Comments
 (0)