一、React的過渡動畫
1、react-transition-group
在開發中，我們想要給一個組件的顯示和消失，添加某種過渡動畫，可以很好的增加用戶體驗，
React社區為我們提供了react-transition-group用來完成過渡動畫，
React曾為開發者提供過動畫插件react-addons-css-transition-group，后由社區維護，形成了現在的 react-transition-group。
這個庫可以幫助我們方便的實現，組件的 入場 和 離場 動畫，
使用時需要進行額外的安裝，如下：npm install react-transition-group --save
2、主要組件
-
Transition：該組件是一個和平臺無關的組件（不一定要結合CSS）
在前端開發中，一般是結合CSS來完成樣式，所以比較常用的是CSSTransition -
CSSTransition：在前端開發中，通常使用 CSSTransition 來完成過渡動畫效果
如果只有一個組件，直接使用這個即可 -
SwitchTransition：兩個組件顯示和隱藏切換時，使用該組件 -
TransitionGroup：將多個動畫組件包裹在其中，一般用于列表中元素的動畫
CSSTransition
CSSTransition 是基于 Transition組件構建的，
-
CSSTransition執行過程中，有三個狀態：
appear、enter、exit
這三種狀態，需要定義對應的CSS樣式：
第一類，開始狀態：對應的類是 -appear、-enter、-exit
第二類：執行動畫：對應的類是 -appear-active、-enter-active、-exit-active
第三類：執行結束：對應的類是 -appear-done、-enter-done、-exit-done； -
常見屬性如下：
in：觸發進入或者退出狀態
0、如果添加了 unmountOnExit={true} ，那么，該組件會在執行退出動畫結束后被移除掉；1、當in為true時，觸發進入狀態，會添加 -enter、-enter-acitve 的class，開始執行動畫當動畫執行結束后，會移除兩個class，并且添加 -enter-done 的class2、當in為false時，觸發退出狀態，會添加 -exit、-exit-active 的class，開始執行動畫當動畫執行結束后，會移除兩個class，并且添加 -enter-done 的clas
classNames：動畫class的名稱
決定了在編寫css時，對應的class名稱：
比如，`card-enter、card-enter-active、card-enter-done`
-
unmountOnExit：退出后卸載組件 -
appear：是否在初次進入添加動畫（需要和in同時為true） -
timeout：過渡動畫的時間 -
對應的鉤子函數，為了在動畫的執行過程，來完成一些JavaScript的操作
`onEnter`：在進入動畫之前，被觸發`onEntering`：在應用進入動畫時，被觸發`onEntered`：在應用進入動畫結束后，被觸發`onExit`：離開動畫之前，被觸發`onExiting`：離開動畫時，被觸發`onExited`：離開動畫之后，被觸發
CSSTransition的示例
下班了，明天再接著寫
)
