Vue路由切换时的左滑和右滑效果示例


Posted in Javascript onMay 29, 2018

如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ、微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了。

transition

首先看看官网 淡入淡出动画的例子:

<div id="demo">
 <button v-on:click="show = !show">
  Toggle
 </button>
 <transition name="fade">
  <p v-if="show">hello</p>
 </transition>
</div>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}

左右切换效果

CSS部分

我们要实现的是左右切换的效果,所以要定义两种动画(左滑和右滑)

.transitionBody{
 transition: all 0.15s ease; /*定义动画的时间和过渡效果*/
}

.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0); 
   /*当左滑进入右滑进入过渡动画*/
}

.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0); 
  transform: translate(-100%, 0); 
}

HTML部分

这里的 keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,我们要把它也包裹在transition标签内,否则页面将重新渲染,切换的动画也会卡顿

<transition :name="transitionName">
  <keep-alive>
      <router-view class="transitionBody"></router-view>
  </keep-alive>
</transition>

JS部分

在Vue组件中,data必须是一个函数,将对象 {transitionName: ‘transitionLeft'} 挂载到Vue实例中,然后我们可以监听路由的 to 和 from 来判断此时应该左滑还是右滑,来动态切换transition的name值。

export default {
 data() {
   return {
    transitionName: 'transitionLeft'
   };
 },
 watch: { 
  '$route' (to, from) { 
   const arr = ['/goods','/ratings','/seller'];
   const compare = arr.indexOf(to.path)>arr.indexOf(from.path);
   this.transitionName = compare ? 'transitionLeft' : 'transitionRight';
  } 
 }  
}

点击链接体验一下: https://zc95.github.io/demo/vue-sell

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
vue实现弹幕功能
Oct 25 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
Vue 组件传值几种常用方法【总结】
May 28 #Javascript
讲解vue-router之命名路由和命名视图
May 28 #Javascript
微信小程序实现图片上传功能
May 28 #Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 #Javascript
讲解vue-router之什么是编程式路由
May 28 #Javascript
讲解vue-router之什么是嵌套路由
May 28 #Javascript
微信小程序上传图片实例
May 28 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
React中jquery引用的实现方法
2017/09/12 jQuery
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python正则表达式re模块详解
2014/06/25 Python
Python实现去除代码前行号的方法
2015/03/10 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
军训自我鉴定100字
2014/02/13 职场文书
餐饮营销方案
2014/02/23 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
党员自评材料范文
2014/12/17 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
浅谈Python中的正则表达式
2021/06/28 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis