React進出場動畫（組件/頁面切換動畫）

關於進出場動畫

進出場動畫，最先我實在Angular中接觸到的。Angular中簡單的配置，就可實現頁面有動畫的卸載和動畫記載，令我影響深入。可是在react中，並沒找到直接的進出場動畫。調研了一下，這個具體實現，要藉助官方的一個組件來實現。

演示

這個效果是基於iOS系統設置列表選擇列表項的效果製做的，可是返回效果沒能實現iOS同樣的倒退效果。

ReactCSSTransitionGroup

這個組件是 react-addons-css-transition-group 這個庫中的組件。這個庫也是官方推薦的React拓展庫。這個庫暫時很少作介紹，詳細請看好比 react ReactCSSTransitionGroup 動畫api
這裏使用的是ReactCSSTransitionGroup組件配合React-Router完成的效果。

原理

這個動畫完成的原理主要有兩個：

1. ReactCSSTransitionGroup 組件經過給children添加配置的class，經過css過渡動畫，實現進場和出廠動畫。當children發生變化時，經過斷定children組件的key。若是key相同，則不發生變化；key不一樣，則斷定其是掛載仍是卸載，來添加對應的css類。

2. React-Router 就是經常使用的前端路由。經過匹配路由表中的路由，切換不一樣的組件。而且能夠給組件注入頁面路由等參數。

實現過程

實現過程分3步。

1.準備好不一樣頁面和路由表。

Demo中有三個頁面：index, list, button頁面。
路由表以下：

import Layout from '../layout/index'
import Home from '../containers/Home'
import Button from '../containers/DataEntry/ButtonPage'
import List from '../containers/DataDisplay/ListPage'

export const createRoutes = () => ({
    path: '/',
    component: Layout,
    indexRoute: { component: Home },
    childRoutes: [
        {path: 'index', component: Home},
        {path: '/data-entry', childRoutes: [
            {path: 'button', component: Button}
        ]},
        {path: '/data-display', childRoutes: [
            {path: 'list', component: List}
        ]}
    ]
});

export default createRoutes

這裏關鍵就是 根路徑 "/" 下對應的是Layout組件，該組件就是路由切換的核心。

2.Layout組件

Layout組件是項目的佈局組件，其做用就是一個攔截器，目前負責頁面實現切換效果。

import React from 'react'
import 'normalize.css'
import '../static/sass/index.scss'
import '../static/sass/component.scss'
import '../static/icon/font.css'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

class Layout extends React.Component {
    render () {
        return (
            <ReactCSSTransitionGroup
            component="div"
            className="react-container"
            transitionName="slide-in"
            transitionEnterTimeout={300}
            transitionLeaveTimeout={300}>
                <div key={this.props.location.pathname} className={this.props.location.pathname}>
                    {this.props.children}
                </div>
            </ReactCSSTransitionGroup>
        )
    }
}

export default Layout

給ReactCSSTransitionGroup組件設置參數，使其渲染出一個class爲react-container的div標籤。過渡動畫類名是slide-in，進場動畫和出廠動畫都是300ms。
其包裹了一個div，該div的class和key都是this.props.location.pathname，該值就是當前頁面對應的路徑，這樣每一個頁面的路徑不一樣，每次切換頁面的時候，ReactCSSTransitionGroup一定會卸載舊頁面，加載新頁面，實現動畫效果。

3.CSS類

// 進出場動畫
// 飛入
.slide-in-appear {
  transform: translate3D(100%, 0, 0);
  transition: all 300ms linear;

  &.slide-in-appear-active {
    transform: translate3D(0, 0, 0);
  }
}

.slide-in-enter {
  transform: translate3D(100%, 0, 0);
  transition: all 300ms linear;

  &.slide-in-enter-active {
    transform: translate3D(0, 0, 0);
  }
}

// 向左滑出
.slide-in-leave {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transform: translate3D(0, 0, 0);
  transition: all 300ms linear;

  &.slide-in-leave-active {
    opacity: 0.01;
    transform: translate3D(-100%, 0, 0);
  }
}

經過定義好動畫不一樣狀態的css，來實現對應效果。
若是對appear，enter，和leave類不瞭解的，請閱讀 react ReactCSSTransitionGroup 動畫api
動畫到此完成。

總結

React中的進出場動畫，須要本身研究實現，沒有直接的插件或源生組件。
以前看到過 Ant-mobile中有相似的插件，但隨着版本迭代不見了。
也能夠參考 An-Motion 中的效果。
還有，Ant插件做爲國內React插件中佼佼者，很是不錯，極力推薦，比Google Material豐富了不少，國際化也比較好。
最後，上述閱讀不明白的，能夠參考 基於ReactCSSTransitionGroup實現react-router過渡動畫
源代碼在github上