@remax-component/transition-group NPM

Remax Transition Group

yarn add @remax-component/transition-group
# 或者
npm i @remax-component/transition-group

名称	类型	默认值	描述
in	boolean	false	是否展示组件。变化时会触发`enter`和`exit`的状态改变
mountOnEnter	boolean	false	默认子组件会立即被挂载到`<Transition />`父组件下。如果你想”懒挂载”这个组件，仅当`in={true}`时挂载，你可以设置`mountOnEnter`。当组价首次挂载后，即使状态为`EXITED`，组件依旧会保持存在。除非你设置了`unmountOnExit`
appear	boolean	false	默认状态下，下，组件挂载时不会改变 enter 的状态，即使`in={true}`。如果你想实现组件挂载后立即改变 enter 的状态，请设置`appear={true}`。请注意，并没有称为`appearing`或`appeared`的状态。然而在`<CSSTransition />`中，有另外的`appear-*`的`className`，凭借于此，你可以设置不同的样式。
enter	boolean	true	是否在触发 enter 的 transition
exit	boolean	true	是否触发 exit 的 transition
timeout	`number \| { enter?: number, exit?: number, appear?: number }`	0	各个状态变切换的时间。他与 CSS 样式中的时间相相对应
onEnter, onEntering, onEntered	`(isAppearing: boolean) => any`		当 in 从`false`到`true`，或者设置了`appear`之后的回调。若`appear={true}`且在组件挂载的时期，则`isAppearing`为 true，其它情况下为`false`
onExit, onExiting, onExited	`() => any`		`in`从`true`变为`false`时的回调

|名称|类型|默认值|描述| |children|ReactElement|(status: TransitionStatus) => ReactElement||必填，一个 renderProps，接收不同的 status 渲染不同内容|

名称	类型	默认值	描述
classNames	`string\|{ appear?: string; appearActive?: string; appearDone?: string; enter?: string; enterActive?: string; enterDone?: string; exit?: string; exitActive?: string; exitDone?: string; }`	`''`	transition 在不同状态下的 className，如果是`string`类型，则最后为`-enter` `-enter-active` `-enter-done`, `-exit` `-exit-active`, `-exit-done`, `-appear`, `-appear-active`, `*-appear-done`
children	`ReactElement`	无	请确保 children 可以利用`className`属性
className	`string\|undefined`	`undefined`	额外的 className，会与 transition 的 className 一起传给 children