react如何实现页面切换的效果

这个是作者解决animated-transitions的bug后封装好的父级组件
于是我打算放手试一试

三.乾坤一掷

使用起来非常简单，分成两步
1.安装：

 npm install react-animated-router --save

2.在项目中使用：

 import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
 import 'react-animated-router/animate.css'; //引入默认的动画样式定义

然后将路由组件 Switch替换为 AnimatedRouter 即可;
按照组件作者的文章完成这两步后，就报错了：

四.破釜沉舟

个中曲折说来话长，最后我才知道原来还要另外安装两个插件：

 npm install react-transition-group@2.3.0 --save
 npm install –save-dev prop-types

然后，页面就可以正常运行不报错了，页面切换效果也有了；感谢组件的作者
需要补充的是，动画切换的样式文件就在node_modulesreact-animated-routeranimate.css里，你可以根据自己的需要直接修改动画效果。
或者复制出来修改再引用也许更好；

相关文章推荐：

React-Native+Mobx实现商城APP

React Native实现验证码倒计时功能

activity切换动画和页面切换动画_html/css_WEB-ITnose

HTML5单页面手势滑屏切换如何实现