react之路： react過渡動畫（react-transition-group）

github倉庫地址：https://github.com/wanghao12345/react-book

這里主要講解使用react-transition-group里面的CSSTransition實現動畫。

使用CSSTransition實現動畫，一共分三步：

1.引用CSSTransition

  import { CSSTransition } from 'react-transition-group' 

2.使用CSSTransition將需要動畫的元素包裹起來

<CSSTransition
      in={this.state.focused}
      timeout={200}
      classNames='slide'
>
    ........
 </CSSTransition>

                       

in: 一個是否執行動畫的標准，當in的值為true就開始執行入場動畫，in的值為false就開始執行出場動畫

timeout: 執行一個動畫的時間

classNames:動畫的class名稱，為了描述具體動畫做准備

3.樣式描述動畫效果

.slide-enter {
    transition: all .2s ease-out;
}
.slide-enter-active {
    width: 240px;
}
.slide-exit {
    transition: all .2s ease-out;
}
.slide-exit-active {
    width: 160px;
}

.xxx-enter：入場動畫過渡參數設置

.xxx-enter-active ：入場動畫的效果

.xxx-exit：出場動畫的過渡參數設置

.xxx-exit-active：出場動畫的效果

注意：xxx為第二步定義的CSSTransition的className