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上