react动画 react-transition-group 入门系列

As usual，第一步是

npm install --save react-transition-group

分步理解，先做一个淡入淡出的transition动画，Fade

第一步，引入Transition标签

它接受两个参数，in和timeout

import Transition from 'react-transition-group/Transition'
const Fade = ({ in }) => (
  <Transition in={in} timeout={300}>
      ...
  </Transition>
)

第一个参数in是true or false
代表了是’淡入’状态，还是’淡出’状态

timeout代表了整个的持续时间

第二步，4个状态

<Transition in={in} timeout={300}>
    {state => {
        if(state == 'entering')
            return <MyComponent1 />
        if(state == 'entered')
            return <MyComponent2 />
    }}
</Transition>

Transition中间传入一个函数，并获得一个参数state,
这个函数要返回一个React组件，

根据动画进行的不同阶段，
参数state的取值为 entering, entered, exiting, exited

比如说，你设置的时间是300ms，
当in从false变成true的时候，
显示MyComponent1组件,（entering）,
300ms之后,
切换到MyComponent2组件,（entered）,
exiting和exited以此类推

到这里动画的原理就很明显了

运行原理

从头来看，它其实就是一个状态机，
跟动画没什么关系，
所以它的名字也是叫Transition

有点像路由，在不同的组件中选择一个渲染，
唯一的区别是，它只有4个“路由”选项:

进入(in==true)时，url是entering
300ms后，url变成entered

退出(in==false)时，url是exiting
300ms后，url变成exited

然后加上css ease-in-out就成了动画
over