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一般方法介绍 入门参考
Jun 21 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python异常处理操作实例详解
2018/05/10 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python目录和文件处理总结详解
2019/09/02 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
JDO的含义
2012/11/17 面试题
3个CCIE对一个工程师的面试题
2012/05/06 面试题
幼儿园小班植树节活动方案
2014/03/04 职场文书
元旦晚会主持词
2014/03/24 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js