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添加实现后台权限添加的效果
May 28 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
javascript制作2048游戏
Mar 30 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
Node.js简单入门前传
Aug 21 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
jquery.post用法示例代码
2014/01/03 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
js实现动态时钟
2020/03/12 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Sanic框架Cookies操作示例
2018/07/17 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python调用webservice接口的实现
2019/07/12 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
建材业务员岗位职责
2013/12/08 职场文书
办公室经理岗位职责
2014/01/01 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
三八妇女节标语
2014/10/09 职场文书
消防宣传标语大全
2015/08/03 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android