vue router自动判断左右翻页转场动画效果


Posted in Javascript onOctober 10, 2017

前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui

因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件

最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得,

一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如:

1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时,

 二级页面从屏幕的右边向左边移动出现。(类似翻书翻到下一页的效果)

2. 从当前二级页面跳回一级页面需要展示的转场动画是二级页面向屏幕右边移动消失的同时,

 一级页面从屏幕的左边向右边移动出现。类似(翻书翻回到上一页的效果)

但是出现了一个问题:如何判断当前页面和将要跳转页面之间的层级关系呢?

我的解决办法是:创建页面 (组件)时,在定义页面的router里通过设置页面的path(访问路径 )属性来区分组件之间的层级关系。

比如一个一级页面 (组件) ‘A' 的访问路径为 ‘/A' 。他的二级页面 ‘B' 的访问路径为 ‘/A/B' .

那么在跳转页面之前,只需要比较当前页面和将要跳转到的页面的路径深度就可以动态设置转场动画了。

比如 ‘/A/B'的深度 >  ‘/A' 的深度那么 从B页面跳转到A页面就应该是 效果2:(翻书翻回到上一页的效果).

一 。首先父页面

home.vue:

<!-- keepAlList是用来动态判断组件是否需要keep-alive,建议保存到vuex中作为全局变量,至于下方的css动画,看官可以按照喜好自由修改-->
<transition :name="transNa">
 <keep-alive :include="keepAlList">
 <router-view class="child-view"></router-view>
 </keep-alive>
</transition>
<style scoped>
.child-view {
 position: absolute;
 width: 100%;
 height: 100%;
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
}
.rightin-enter,
.leftin-leave-active {
 opacity: 0;
 transform: translate3d(50% 0, 0);
 -webkit-transform: translate3d(50%, 0, 0);
 -moz-transform: translate3d(50%, 0, 0);
}
.leftin-enter,
.rightin-leave-active {
 opacity: 0;
 transform: translate3d(-50% 0, 0);
 -webkit-transform: translate3d(-50%, 0, 0);
 -moz-transform: translate3d(-50%, 0, 0);
}
</style>

二 。其次附上我的main.js片段(用来在跳转页面之前动态设置转场动画)

main.js:

//进入路由之前设置拦截器
let noLoginList = ["login", "register", "forget", "home", "classify", "goodsDetial"];
router.routeInfo.beforeEach((to, from, next) => {
 let user = sessionStorage.getItem('user');
 //如果要去登录页面
 if (noLoginList.indexOf(to.name) >= 0) {
  if (!user || user == '') {
   //未登录的状态通行
   next();
   return;
  } else {
   if (["login", "register", "forget"].indexOf(to.name) >= 0) {
    //已登录的状态去首页
    next({
     name: 'home'
    });
    return;
   } else {
    //已登录的状态去首页
    next();
    return;
   }
  }
 } else {
  //去登录页面以外的页面(以下是本文关键代码)
  if (user && user != '') {
   //判断是否为需要缓存组件,如果是添加组件名到数组
   if (to.meta.keepAlive) {
    const toName = to.name;
    let keepLi = store.getters.getKeepAlList;
    keepLi.indexOf(toName) < 0 ? keepLi.push(toName) : '';
    store.commit('SET_KEEPALLIST', keepLi);
   }
   //根据路径名深度设置转场动画类型
   store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin'));
   next();
  } else {
   let toWhere = router.nameList.indexOf(to.name) >= 0 ? to : {name: 'home'};
   next({
    name: 'login',
    params: {
     jumpTo: {
      name: toWhere.name,
      params: toWhere.params,
      query: toWhere.query,
     },
    }
   });
  }
 }
});

总结

以上所述是小编给大家介绍的vue router自动判断左右翻页转场动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
理解javascript中DOM事件
Dec 25 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
javascript常用的设计模式
Feb 09 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 #Javascript
ionic选择多张图片上传的示例代码
Oct 10 #Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
JS判断数组那点事
Oct 10 #Javascript
template.js前端模板引擎使用详解
Oct 10 #Javascript
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
限制复选框的最大可选数
2006/07/01 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
微信小程序实现原生步骤条
2019/07/25 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python进阶篇之字典操作总结
2016/11/16 Python
一百多行python代码实现抢票助手
2018/09/25 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python实现ftp文件传输功能
2020/03/20 Python
python中的yield from语法快速学习
2020/11/06 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
合作意向书范本
2019/04/17 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫