@remax-component/transition-group

Remax Transition Group

react-transition-group以 Remax 方式实现

安装

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

使用

可见 http://reactcommunity.org/react-transition-group/transition 等待添加新的例子

API

useTransition ， <Transition />，<CSSTransition /> 共用的属性

名称	类型	默认值	描述
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
onEnter, onEntering, onEntered	(isAppearing: boolean) => any		当 in 从false到true，或者设置了appear之后的回调。若appear={true}且在组件挂载的时期，则isAppearing为 true，其它情况下为false
onExit, onExiting, onExited	() => any		in从true变为false时的回调

<Transition />特有属性

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

<CSSTransition />特有的属性

名称	类型	默认值	描述
classNames	`string	{ appear?: string; appearActive?: string; appearDone?: string; enter?: string; enterActive?: string; enterDone?: string; exit?: string; exitActive?: string; exitDone?: string; }`	''
children	ReactElement	无	请确保 children 可以利用className属性
className	`string	undefined`	undefined

TODO

• TransitionGroup 的实现
• SwitchTransition 的实现

License

MIT