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'; //引入默认的动画样式定义
然后将路由组件 Switch替换为 AnimatedRouter 即可;
按照组件作者的文章完成这两步后,就报错了:
歪?调弥歪?
四.破釜沉舟
个中曲折说来话长,最后我才知道原来还要另外安装两个插件:
npm install react-transition-group@2.3.0 --save
npm install –save-dev prop-types
然后,页面就可以正常运行不报错了,页面切换效果也有了;感谢组件的作者
需要补充的是,动画切换的样式文件就在node_modules\react-animated-router\animate.css里,你可以根据自己的需要直接修改动画效果。
或者复制出来修改再引用也许更好;
五.片尾广告(请直接跳过)
个人小程序,欢迎体验:
react实现页面切换动画效果的更多相关文章
- Windows Phone使用sliverlight toolkit实现页面切换动画效果
使用应用时,好多app在页面切换的时候都有一个动画效果,感觉很炫,也大大增加了用户体验,怎么实现呢? 界面的切换,可以用Windows Phone Toolkit中的TransitionService ...
- 超炫的 CSS3 页面切换动画效果
在线演示 源码下载
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- (原)android中的动画(三)之动画监听&页面切换动画
1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...
- iOS页面切换动画实现方式。
iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...
- Activity 切换动画和页面切换动画
public class MainActivity extends Activity { private ViewFlipper viewFlipper; private float startX; ...
- Angular 全局页面切换动画 me-pageloading
最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做 ...
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...
- Xcode界面切换动画效果
CATransition *animation = [CATransition animation]; [animation setDuration:0.2f]; [animation setTimi ...
随机推荐
- git上传过滤忽略文件
有些时候我们不想把某些文件纳入版本控制中,比如数据库文件,临时文件,设计文件等 在主目录下建立".gitignore"文件,此文件有如下规则: 忽略文件中的空行或以井号(#)开始的 ...
- 【luogu P3884 [JLOI2009]二叉树问题】 题解
题目链接:https://www.luogu.org/problemnew/show/P3884 对方不想和你说话并向你扔了一个lca模板. #include <cstdio> #incl ...
- vue2.0+node.js+mongodb全栈打造商城
Github地址:https://github.com/ccyinghua/vue-node-mongodb-project 一.构建项目所用: vue init webpack vue-node-m ...
- 给xcode项目重命名
在xcode项目开发中,经常会遇到需要修改项目名字的问题, 但是xcode本身修改项目名字比较麻烦,有时候修改的不完全,有时候修改了项目无法打开,无奈只能建一个新项目.这里提供一种修改xcode项目名 ...
- Angularjs基础(二)
AngularJS 表达式 AngularJS 表达式写在双大括号内:{{expression}} AngularJS 表达式把数据绑定到HTML,这与ng-bind 指令有异曲同工之妙 Angula ...
- flex 遇到white-space:nowrap
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...
- BZOj1261: [SCOI2006]zh_tree(dp)
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 400 Solved: 272[Submit][Status][Discuss] Descriptio ...
- ABAP术语-EDI (Electronic Data Interchange)
EDI (Electronic Data Interchange) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/29/1057386.ht ...
- SpringBoot配置全局自定义异常
不同于传统集中时Springmvc 全局异常,具体查看前面的章节https://www.cnblogs.com/zwdx/p/8963311.html 对于springboot框架来讲,这里我就介绍一 ...
- ansible服务的部署与使用
简介: ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序 ...