react-transition-group简易说明

Transition

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

例如：

    {state=>(
        
{state}
    )}

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

CSSTransition

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

例如：

    //子组件（需要动画的组件）

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

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

  
    {items.map(({ id, text }) => (
      
        
{text}
      
    ))}
  

常用属性

• 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
}}