react 翻书效果_react实现页面切换动画效果

一.前情概要

注：(我使用的路由是react-router4)

如下图所示，我们需要在页面切换时有一个过渡效果，这样就不会使页面切换显得生硬，用户体验大大提升；

but the 问题是，react的路由动画没有vue那么方便，在vue里面写几个样式就搞定了，在react里面，还要安装插件；

于是我就找了网上的一下方法，像react-addons-css-transition-group等等，又要安装插件，又要改路由的结构，又要搞什么vuex，又要判断什么时候入场动画....

我试了大概两个方法后，不知道为什么都没有成功...秋天不知不觉已经来了，寒风阵阵，不禁想起了vue..但我已经回不了头了；

二.峰回路转

就在这时，我在一篇文章找到了一个插件：

这个是作者解决animated-transitions的bug后封装好的父级组件

于是我打算放手试一试

三.乾坤一掷

使用起来非常简单，分成两步

1.安装：

npm install react-animated-router --save

2.在项目中使用：

import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件

import 'react-animated-router/animate.css'; //引入默认的动画样式定义<