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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
Angular2实现的秒表及改良版示例
May 10 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php 什么是PEAR?
2009/03/19 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
dedecms中使用php语句指南
2014/11/13 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
浅析python协程相关概念
2018/01/20 Python
python生成圆形图片的方法
2020/03/25 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
小学英语教学反思
2014/01/30 职场文书
办理护照工作证明
2014/10/10 职场文书
初中家长评语大全
2014/12/26 职场文书
高三英语教学计划
2015/01/23 职场文书
失恋33天观后感
2015/06/11 职场文书
Python学习之os包使用教程详解
2022/03/21 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS