react實現頁面切換動畫效果

一.前情概要

注：（我使用的路由是react-router4）
    以下圖所示，咱們須要在頁面切換時有一個過渡效果，這樣就不會使頁面切換顯得生硬，用戶體驗大大提高；

    but the 問題是，react的路由動畫沒有vue那麼方便，在vue裏面寫幾個樣式就搞定了，在react裏面，還要安裝插件；
   因而我就找了網上的一下方法，像react-addons-css-transition-group等等，又要安裝插件，又要改路由的結構，又要搞什麼vuex，又要判斷何時入場動畫....
   我試了大概兩個方法後，不知道爲何都沒有成功...秋天不知不覺已經來了，寒風陣陣，不由想起了vue..但我已經回不了頭了；

二.峯迴路轉

   就在這時，我在一篇文章找到了一個插件：

連接：使用react-router v4和react-transition-group實現頁面路由切換動畫效果

    這個是做者解決animated-transitions的bug後封裝好的父級組件
    因而我打算放手試一試

三.乾坤一擲

    使用起來很是簡單，分紅兩步
1.安裝：

npm install react-animated-router --save

2.在項目中使用：

import AnimatedRouter from 'react-animated-router'; //咱們的AnimatedRouter組件
   import 'react-animated-router/animate.css'; //引入默認的動畫樣式定義

    而後將路由組件 Switch替換爲 AnimatedRouter 便可;
    按照組件做者的文章完成這兩步後，就報錯了：

    歪？調彌歪？

四.破釜沉舟

    箇中曲折說來話長，最後我才知道原來還要另外安裝兩個插件：

npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types

   而後，頁面就能夠正常運行不報錯了，頁面切換效果也有了；感謝組件的做者
   須要補充的是，動畫切換的樣式文件就在node_modulesreact-animated-routeranimate.css裏，你能夠根據本身的須要直接修改動畫效果。
   或者複製出來修改再引用也許更好；

五.片尾廣告（請直接跳過）

我的小程序，歡迎體驗：