@remax-component/transition-group
v0.0.4
Published
react-transition-group for Remax
Downloads
63
Readme
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 | 各个状态变切换的时间。他与 CSS 样式中的时间相相对应 |
| 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; }
| ''
| 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 |
TODO
- TransitionGroup 的实现
- SwitchTransition 的实现
License
MIT