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