react-transition-group简易说明

Transition

默认展示组件某个特定状态的样式，而不是创建渐变动画

例如：

<Transition
        in={toggleShow}
        timeout={1000}
        unmountOnExit
        >
    {state=>(
        <div>{state}</div>
    )}
</Transition>

注意：子组件是函数（见下方children）

CSSTransition

展示组件从状态到另一个状态的动态变化，需要定义className和相关样式

例如：

<CSSTransition 
        in={toggleShow}
        className="fade"
        timeout={300}
        >
    //子组件（需要动画的组件）
</CSSTransition>

css中设置如下：

.fade-enter {
  opacity: 0.01;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0.01;
  transition: opacity 300ms;
}

TransitionGroup

管理一些列组件的动画，例如列表

<ul>
  <TransitionGroup>
    {items.map(({ id, text }) => (
      <CSSTransition
        key={id}
        timeout={500}
        classNames="fade"
      >
        <li>{text}</li>
      </CSSTransition>
    ))}
  </TransitionGroup>
</ul>

常用属性

• children

当children是一个函数时，接受一个参数state，state包含了内部组件的transition状态
'entering', 'entered', 'exiting', 'exited', 'unmounted'

• in

定义当前组件的状态(true为entered，false为exited)

• unmountOnExit

当状态为exited的时候是否需要unmount

• timeout

定义transition间隔，可以这么写：

timeout={{
  enter:300,
  exit:300
}}