react-transition-group for Remax
npm install @remax-component/transition-groupreact-transition-group以 Remax 方式实现
``sh`
yarn add @remax-component/transition-group或者
npm i @remax-component/transition-group
可见 http://reactcommunity.org/react-transition-group/transition
等待添加新的例子
| 名称 | 类型 | 默认值 | 描述 |
| ------------------------------ | ------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| in | boolean | false | 是否展示组件。变化时会触发enter和exit的状态改变 |
| mountOnEnter | boolean | false | 默认子组件会立即被挂载到父组件下。如果你想”懒挂载”这个组件,仅当in={true}时挂载,你可以设置mountOnEnter。当组价首次挂载后,即使状态为EXITED,组件依旧会保持存在。除非你设置了unmountOnExit |in={true}
| appear | boolean | false | 默认状态下, 下,组件挂载时不会改变 enter 的状态,即使。如果你想实现组件挂载后立即改变 enter 的状态,请设置appear={true}。请注意,并没有称为appearing或appeared的状态。然而在中,有另外的appear-*的className,凭借于此,你可以设置不同的样式。 |number | { enter?: number, exit?: number, appear?: number }
| enter | boolean | true | 是否在触发 enter 的 transition |
| exit | boolean | true | 是否触发 exit 的 transition |
| timeout | | 0 | 各个状态变切换的时间。他与 CSS 样式中的时间相相对应 |(isAppearing: boolean) => any
| onEnter, onEntering, onEntered | | | 当 in 从false到true,或者设置了appear之后的回调。若appear={true}且在组件挂载的时期,则isAppearing为 true,其它情况下为false |() => any
| onExit, onExiting, onExited | | | 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 |ReactElement
| children | | 无 | 请确保 children 可以利用className属性 |string|undefined
| className | | undefined` | 额外的 className,会与 transition 的 className 一起传给 children |
- TransitionGroup 的实现
- SwitchTransition 的实现
MIT