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上