vue-router实现webApp切换页面动画效果代码


Posted in Javascript onMay 25, 2017

vue-router实现webApp切换效果

演示效果

vue-router实现webApp切换页面动画效果代码

快速集成

1.复制PageTransittion.vue到项目目录。2.修改router配置。

Router.prototype.goBack = function () {
 this.isBack = true
 window.history.go(-1)
}
const router = new Router({
 routes: [
  {
   path: '/',
   name: 'PageTransition', 
   component: PageTransition, // 引入页面切换组件
   children: [{
    path: '',
    component: Index // 父路由访问页面,例如,访问www.aaa.com/ 显示的是Index组件
   }, {
    path: '/pageA',
    component: PageA // 子路由组件 例如,访问www.aaa.com/pageA 显示为PageA
   }, {
    path: '/pageB',
    component: PageB // 子路由组件 例如,访问www.aaa.com/pageB 显示为PageB
   }]
  }
 ]
})

方案实现

记录页面状态

要实现页面前进后台动画,首先必须知道页面状态(即是页面是进入下一页,还是后退),我们可以通过改写router.Go方法记录回退状态,页面如果需要回退时,调用

$router.go(-1)

修改router/index.vue

// 增强原方法,好处是旧的业务模块不需要任何变动
Router.prototype.go = function () {
 this.isBack = true
 window.history.go(-1)
}

// 或者你可以新建一个方法
Router.prototype.goBack = function () {
 this.isBack = true
 this.go(-1)
}

当new Router时,实例就包含go/goBack方法。

监听路由变化

使用嵌套路由的方式引入子页面,监听根路由的update钩子做相应操作。

beforeRouteUpdate (to, from, next) {
 // 如果isBack为true时,证明是用户点击了回退,执行slide-right动画
  let isBack = this.$router.isBack
  if (isBack) {
   this.transitionName = 'slide-right'
  } else {
   this.transitionName = 'slide-left'
  }
  // 做完回退动画后,要设置成前进动画,否则下次打开页面动画将还是回退
  this.$router.isBack = false
   next()
}

动画效果

通过transition执行动画

<transition :name="transitionName">
  <router-view class="child-view"></router-view>
 </transition>

css代码

.child-view {
 position: absolute;
 width:100%;
 transition: all .8s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(50px, 0);
 transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-50px, 0);
 transform: translate(-50px, 0);
}

路由设置

router/index.js

const router = new Router({
 routes: [
  {
   path: '/',
   name: 'PageTransition',
   component: PageTransition,
   children: [{
    // 该路由为父路由的默认路由
    path: '',
    component: Index
   }, {
    path: '/pageA',
    component: PageA
   }, {
    path: '/pageB',
    component: PageB
   }]
  }
 ]
})

github地址:https://github.com/zhengguorong/pageAinimate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
Angular 2.x学习教程之结构指令详解
May 25 #Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 #Javascript
js获取一组日期中最近连续的天数
May 25 #Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 #Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 #Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 #Javascript
React-router中结合webpack实现按需加载实例
May 25 #Javascript
You might like
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PDO::_construct讲解
2019/01/27 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
JavaScript this绑定过程深入详解
2018/12/07 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
sklearn的predict_proba使用说明
2020/06/28 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
装修五一活动策划案
2014/01/23 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
张丽莉观后感
2015/06/16 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers