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 select下拉框操作的一些说明
Apr 02 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
深入理解Django中内置的用户认证
2017/10/06 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
教师现实表现材料
2014/02/14 职场文书
开学典礼主持词
2014/03/19 职场文书
调解协议书
2014/04/16 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
支行行长岗位职责
2015/02/15 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS