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 相关文章推荐
js数组Array sort方法使用深入分析
Feb 21 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jquery不常用方法汇总
Jul 26 Javascript
微信JSSDK上传图片
Aug 23 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
一个PHP并发访问实例代码
2012/09/06 PHP
关于php循环跳出的问题
2013/07/01 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js切换光标示例代码
2013/10/10 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JQuery球队选择实例
2015/05/18 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
简单了解python的内存管理机制
2019/07/08 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
业务代表的岗位职责
2013/11/16 职场文书
电子专业推荐信范文
2013/11/18 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang