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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
理解javascript回调函数
Dec 28 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP基础学习小结
2011/04/17 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python内置函数dir详解
2015/04/14 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
家长给孩子的评语
2014/01/30 职场文书
副厂长岗位职责
2014/02/02 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
人资专员岗位职责
2014/04/04 职场文书
欠条格式范本
2015/07/03 职场文书
七一慰问简报
2015/07/20 职场文书
认识实习感想
2015/08/10 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle