From 0e66a306744923effd13adccd8f4f0bf51ab27da Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 18 Jan 2024 19:43:11 +0800 Subject: [PATCH] chore(Animate): update readme --- components/animate/__docs__/index.en-us.md | 84 +++++++++++----------- components/animate/__docs__/index.md | 84 +++++++++++----------- 2 files changed, 84 insertions(+), 84 deletions(-) diff --git a/components/animate/__docs__/index.en-us.md b/components/animate/__docs__/index.en-us.md index a46a9482e3..87c961bffe 100644 --- a/components/animate/__docs__/index.en-us.md +++ b/components/animate/__docs__/index.en-us.md @@ -16,51 +16,51 @@ Need to customize animation. ### Animate -| Param | Description | Type | Default Value | Required | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | -------- | -| animation | The animation className | string \| Partial> | - | | -| animationAppear | Whether to execute animation on the first mount | boolean | true | | -| component | The tag of the wrapper | TransitionGroupProps['component'] | 'div' | | -| singleMode | Whether to only have a single child | boolean | true | | -| beforeAppear | Callback fired before the "entering" status of the first mount is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onAppear | Callback fired after the "entering" status of the first mount is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| afterAppear | Callback fired after the "entered" status of the first mount is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| beforeEnter | Callback fired before the "entering" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onEnter | Callback fired after the "entering" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| afterEnter | Callback fired after the "entered" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| beforeLeave | Callback fired before the "exiting" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onLeave | Callback fired after the leave stage

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| afterLeave | Callback fired after the leave stage

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | +| Param | Description | Type | Default Value | Required | +| --------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | -------- | +| animation | The animation className | string \| Partial> | - | | +| animationAppear | Whether to execute animation on the first mount | boolean | true | | +| component | The tag of the wrapper | React.ElementType | 'div' | | +| singleMode | Whether to only have a single child | boolean | true | | +| beforeAppear | Callback fired before the "entering" status of the first mount is applied | (node: HTMLElement) => void | - | | +| onAppear | Callback fired after the "entering" status of the first mount is applied | (node: HTMLElement) => void | - | | +| afterAppear | Callback fired after the "entered" status of the first mount is applied | (node: HTMLElement) => void | - | | +| beforeEnter | Callback fired before the "entering" status is applied | (node: HTMLElement) => void | - | | +| onEnter | Callback fired after the "entering" status is applied | (node: HTMLElement) => void | - | | +| afterEnter | Callback fired after the "entered" status is applied | (node: HTMLElement) => void | - | | +| beforeLeave | Callback fired before the "exiting" status is applied | (node: HTMLElement) => void | - | | +| onLeave | Callback fired after the leave stage | (node: HTMLElement) => void | - | | +| afterLeave | Callback fired after the leave stage | (node: HTMLElement) => void | - | | ### Animate.Expand -| Param | Description | Type | Default Value | Required | -| ----------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | -------- | -| animation | The animation className | string \| Partial> | - | | -| beforeEnter | Callback fired before the "entering" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onEnter | Callback fired after the "entering" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| afterEnter | Callback fired after the "entered" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| beforeLeave | Callback fired before the "exiting" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onLeave | Callback fired after the "exiting" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| afterLeave | Callback fired after the "exited" status is applied

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | +| Param | Description | Type | Default Value | Required | +| ----------- | ------------------------------------------------------ | ----------------------------------------------------------------- | ------------- | -------- | +| animation | The animation className | string \| Partial> | - | | +| beforeEnter | Callback fired before the "entering" status is applied | (node: HTMLElement) => void | - | | +| onEnter | Callback fired after the "entering" status is applied | (node: HTMLElement) => void | - | | +| afterEnter | Callback fired after the "entered" status is applied | (node: HTMLElement) => void | - | | +| beforeLeave | Callback fired before the "exiting" status is applied | (node: HTMLElement) => void | - | | +| onLeave | Callback fired after the "exiting" status is applied | (node: HTMLElement) => void | - | | +| afterLeave | Callback fired after the "exited" status is applied | (node: HTMLElement) => void | - | | ### Animate.OverlayAnimate -| Param | Description | Type | Default Value | Required | -| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------- | -------- | -| animation | The animation className | string \| false \| Record<'in' \| 'out', string> | - | | -| visible | Show the component; triggers the enter or exit states | boolean | - | | -| children | The element to be wrapped | ReactElement | - | | -| timeout | The duration of the transition. | \| number
\| { appear?: number \| undefined; enter?: number \| undefined; exit?: number \| undefined } | - | | -| style | The style of the child element | CSSProperties | - | | -| mountOnEnter | By default the child component is mounted immediately along with the
parent OverlayAnimate component. If you want to "lazy mount" the component on
the first `in={true}` you can set `mountOnEnter`. After the first enter
OverlayAnimate the component will stay mounted, even on "exited", unless you
also specify `unmountOnExit`. | boolean | false | | -| unmountOnExit | By default the child component stays mounted after it reaches the
'exited' state. Set `unmountOnExit` if you'd prefer to unmount the
component after it finishes exiting. | boolean | false | | -| onEnter | Callback fired before the "entering" status is applied. An extra
parameter `isAppearing` is supplied to indicate if the enter stage is
occurring on the initial mount

**signature**:
**params**:
_node_: Node
_isAppearing_: IsAppearing | (node: HTMLElement, isAppearing: boolean) => void | - | | -| onEntering | Callback fired after the "entering" status is applied. An extra parameter
isAppearing is supplied to indicate if the enter stage is occurring on
the initial mount

**signature**:
**params**:
_node_: Node
_isAppearing_: IsAppearing | (node: HTMLElement, isAppearing: boolean) => void | - | | -| onEntered | Callback fired after the "entered" status is applied. An extra parameter
isAppearing is supplied to indicate if the enter stage is occurring on
the initial mount

**signature**:
**params**:
_node_: Node
_isAppearing_: IsAppearing | (node: HTMLElement, isAppearing: boolean) => void | - | | -| onExit | Callback fired before the "exiting" status is applied.

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onExiting | Callback fired after the "exiting" status is applied.

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| onExited | Callback fired after the "exited" status is applied.

**signature**:
**params**:
_node_: Node | (node: HTMLElement) => void | - | | -| appear | Normally a component is not transitioned if it is shown when the
`` component mounts. If you want to transition on the first
mount set appear to true, and the component will transition in as soon
as the `` mounts. Note: there are no specific "appear" states.
appear only adds an additional enter transition. | boolean | - | | -| enter | Enable or disable enter transitions. | boolean | - | | -| exit | Enable or disable exit transitions. | boolean | - | | +| Param | Description | Type | Default Value | Required | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------- | -------- | +| animation | The animation className | string \| false \| Record<'in' \| 'out', string> | - | | +| visible | Show the component; triggers the enter or exit states | boolean | - | | +| children | The element to be wrapped | ReactElement | - | | +| timeout | The duration of the transition. | \| number
\| { appear?: number \| undefined; enter?: number \| undefined; exit?: number \| undefined } | - | | +| style | The style of the child element | React.CSSProperties | - | | +| mountOnEnter | "lazy mount" the component on the first `in={true}` | boolean | false | | +| unmountOnExit | "lazy unmount" the component on the first `in={false}` | boolean | false | | +| onEnter | Callback fired before the "entering" status is applied.

**signature**:
**params**:
_isAppearing_: IsAppearing | (node: HTMLElement, isAppearing: boolean) => void | - | | +| onEntering | Callback fired after the "entering" status is applied.

**signature**:
**params**:
_isAppearing_: IsAppearing | (node: HTMLElement, isAppearing: boolean) => void | - | | +| onEntered | Callback fired after the "entered" status is applied.

**signature**:
**params**:
_isAppearing_: IsAppearing | (node: HTMLElement, isAppearing: boolean) => void | - | | +| onExit | Callback fired before the "exiting" status is applied. | (node: HTMLElement) => void | - | | +| onExiting | Callback fired after the "exiting" status is applied. | (node: HTMLElement) => void | - | | +| onExited | Callback fired after the "exited" status is applied. | (node: HTMLElement) => void | - | | +| appear | Transition on the first mount. | boolean | - | | +| enter | Enable or disable enter transitions. | boolean | - | | +| exit | Enable or disable exit transitions. | boolean | - | | diff --git a/components/animate/__docs__/index.md b/components/animate/__docs__/index.md index 23db8322e8..302a5be8f1 100644 --- a/components/animate/__docs__/index.md +++ b/components/animate/__docs__/index.md @@ -16,51 +16,51 @@ ### Animate -| 参数 | 说明 | 类型 | 默认值 | 是否必填 | -| --------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------ | -------- | -| animation | 动画 className | string \| Partial> | - | | -| animationAppear | 子元素第一次挂载时是否执行动画 | boolean | true | | -| component | 包裹子元素的标签 | TransitionGroupProps['component'] | 'div' | | -| singleMode | 是否只有单个子元素，如果有多个子元素，请设置为 false | boolean | true | | -| beforeAppear | 执行第一次挂载动画前触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onAppear | 执行第一次挂载动画，添加 xxx-appear-active 类名后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| afterAppear | 执行完第一次挂载动画后触发的函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| beforeEnter | 执行进场动画前触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onEnter | 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| afterEnter | 执行完进场动画后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| beforeLeave | 执行离场动画前触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onLeave | 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| afterLeave | 执行完离场动画后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | +| 参数 | 说明 | 类型 | 默认值 | 是否必填 | +| --------------- | --------------------------------------------------------------- | ----------------------------------------------------------------- | ------ | -------- | +| animation | 动画 className | string \| Partial> | - | | +| animationAppear | 子元素第一次挂载时是否执行动画 | boolean | true | | +| component | 包裹子元素的标签 | React.ElementType | 'div' | | +| singleMode | 是否只有单个子元素，如果有多个子元素，请设置为 false | boolean | true | | +| beforeAppear | 执行第一次挂载动画前触发的回调函数 | (node: HTMLElement) => void | - | | +| onAppear | 执行第一次挂载动画，添加 xxx-appear-active 类名后触发的回调函数 | (node: HTMLElement) => void | - | | +| afterAppear | 执行完第一次挂载动画后触发的函数 | (node: HTMLElement) => void | - | | +| beforeEnter | 执行进场动画前触发的回调函数 | (node: HTMLElement) => void | - | | +| onEnter | 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数 | (node: HTMLElement) => void | - | | +| afterEnter | 执行完进场动画后触发的回调函数 | (node: HTMLElement) => void | - | | +| beforeLeave | 执行离场动画前触发的回调函数 | (node: HTMLElement) => void | - | | +| onLeave | 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数 | (node: HTMLElement) => void | - | | +| afterLeave | 执行完离场动画后触发的回调函数 | (node: HTMLElement) => void | - | | ### Animate.Expand -| 参数 | 说明 | 类型 | 默认值 | 是否必填 | -| ----------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------ | -------- | -| animation | 动画 className | string \| Partial> | - | | -| beforeEnter | 执行进场动画前触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onEnter | 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| afterEnter | 执行完进场动画后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| beforeLeave | 执行离场动画前触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onLeave | 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| afterLeave | 执行完离场动画后触发的回调函数

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | +| 参数 | 说明 | 类型 | 默认值 | 是否必填 | +| ----------- | -------------------------------------------------------- | ----------------------------------------------------------------- | ------ | -------- | +| animation | 动画 className | string \| Partial> | - | | +| beforeEnter | 执行进场动画前触发的回调函数 | (node: HTMLElement) => void | - | | +| onEnter | 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数 | (node: HTMLElement) => void | - | | +| afterEnter | 执行完进场动画后触发的回调函数 | (node: HTMLElement) => void | - | | +| beforeLeave | 执行离场动画前触发的回调函数 | (node: HTMLElement) => void | - | | +| onLeave | 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数 | (node: HTMLElement) => void | - | | +| afterLeave | 执行完离场动画后触发的回调函数 | (node: HTMLElement) => void | - | | ### Animate.OverlayAnimate -| 参数 | 说明 | 类型 | 默认值 | 是否必填 | -| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------ | -------- | -| animation | 动画 className | string \| false \| Record<'in' \| 'out', string> | - | | -| visible | 是否显示 | boolean | - | | -| children | 子元素 | ReactElement | - | | -| timeout | 过渡的超时时间。 | \| number
\| { appear?: number \| undefined; enter?: number \| undefined; exit?: number \| undefined } | - | | -| style | 子元素样式 | CSSProperties | - | | -| mountOnEnter | 默认情况下，子元素会在 OverlayAnimate 组件挂载时立即挂载。如果您想在第一次 `in={true}` 时“惰性”挂载组件，
可以设置 `mountOnEnter`。在第一次进入后 OverlayAnimate 组件将保持挂载，即使在“退出”状态下也是如此，除非您也指定了 `unmountOnExit`。 | boolean | false | | -| unmountOnExit | 默认情况下，子元素会在 OverlayAnimate 组件离开时立即卸载。如果您想在第一次 `in={false}` 时“惰性”卸载组件，
可以设置 `unmountOnExit`。在第一次离开后 OverlayAnimate 组件将保持卸载，即使在“进入”状态下也是如此，除非您也指定了 `mountOnEnter`。 | boolean | false | | -| onEnter | 在“进入”状态被应用前触发的回调。我们提供了一个额外的参数 isAppearing，用于标识进入阶段是否在初次挂载时发生。

**签名**:
**参数**:
_node_: 节点
_isAppearing_: 是否在初次挂载 | (node: HTMLElement, isAppearing: boolean) => void | - | | -| onEntering | 在“进入”状态被应用后触发的回调。我们提供了一个额外的参数 isAppearing，用于标识进入阶段是否在初次挂载时发生。

**签名**:
**参数**:
_node_: 节点
_isAppearing_: 是否在初次挂载 | (node: HTMLElement, isAppearing: boolean) => void | - | | -| onEntered | 在“已进入”状态被应用后触发的回调。我们提供了一个额外的参数 isAppearing，用于标识进入阶段是否在初次挂载时发生。

**签名**:
**参数**:
_node_: 节点
_isAppearing_: 是否在初次挂载 | (node: HTMLElement, isAppearing: boolean) => void | - | | -| onExit | 在“离开”状态被应用前触发的回调。

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onExiting | 在“离开”状态被应用后触发的回调。

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| onExited | 在“已离开”状态被应用后触发的回调。

**签名**:
**参数**:
_node_: 节点 | (node: HTMLElement) => void | - | | -| appear | 正常情况下，如果组件在组件挂载时就已经显示，那么它不会进行过渡效果。
如果你想在初次挂载时实现过渡效果，请将 appear 属性设置为 true，这样当挂载时，组件会立即开始过渡过程。
请注意，并没有专门的“出现”状态。“出现”属性仅会在初始挂载时增加一次进入过渡效果。 | boolean | - | | -| enter | 启用或禁用进场动画 | boolean | - | | -| exit | 启用或禁用离场动画 | boolean | - | | +| 参数 | 说明 | 类型 | 默认值 | 是否必填 | +| ------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------ | -------- | +| animation | 动画 className | string \| false \| Record<'in' \| 'out', string> | - | | +| visible | 是否显示 | boolean | - | | +| children | 子元素 | ReactElement | - | | +| timeout | 过渡的超时时间。 | \| number
\| { appear?: number \| undefined; enter?: number \| undefined; exit?: number \| undefined } | - | | +| style | 子元素样式 | React.CSSProperties | - | | +| mountOnEnter | 在第一次 `in={true}` 时“惰性”挂载组件 | boolean | false | | +| unmountOnExit | 在第一次 `in={false}` 时“惰性”卸载组件 | boolean | false | | +| onEnter | 在“进入”状态被应用前触发的回调。

**签名**:
**参数**:
_isAppearing_: 是否在初次挂载 | (node: HTMLElement, isAppearing: boolean) => void | - | | +| onEntering | 在“进入”状态被应用后触发的回调。

**签名**:
**参数**:
_isAppearing_: 是否在初次挂载 | (node: HTMLElement, isAppearing: boolean) => void | - | | +| onEntered | 在“已进入”状态被应用后触发的回调。

**签名**:
**参数**:
_isAppearing_: 是否在初次挂载 | (node: HTMLElement, isAppearing: boolean) => void | - | | +| onExit | 在“离开”状态被应用前触发的回调。 | (node: HTMLElement) => void | - | | +| onExiting | 在“离开”状态被应用后触发的回调。 | (node: HTMLElement) => void | - | | +| onExited | 在“已离开”状态被应用后触发的回调。 | (node: HTMLElement) => void | - | | +| appear | 初次挂载时实现过渡效果 | boolean | - | | +| enter | 启用或禁用进场动画 | boolean | - | | +| exit | 启用或禁用离场动画 | boolean | - | |