关于进出场动画
进出场动画，最早我实在Angular中接触到的。Angular中简单的配置，就可实现页面有动画的卸载和动画记载，令我影响深刻。但是在react中，并没找到直接的进出场动画。调研了一下，这个具体实现，要借助官方的一个组件来实现。
演示
这个效果是基于iOS系统设置列表选择列表项的效果制作的，但是返回效果没能实现iOS一样的倒退效果。
ReactCSSTransitionGroup
这个组件是 react-addons-css-transition-group 这个库中的组件。这个库也是官方推荐的React拓展库。这个库暂时不多做介绍，详细请看比如 react ReactCSSTransitionGroup 动画api
这里使用的是ReactCSSTransitionGroup组件配合React-Router完成的效果。
原理
这个动画完成的原理主要有两个：
ReactCSSTransitionGroup 组件通过给children添加配置的class，通过css过渡动画，实现进场和出厂动画。当children发生变化时，通过判定children组件的key。如果key相同，则不发生变化；key不同，则判定其是挂载还是卸载，来添加对应的css类。
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 ponent {
render () {
return (
component="div"
className="react-container"
transitionName="slide-in"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}>
{this.props.children}
)
}
}
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上
