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