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 编程引入命名空间的方法
Jun 29 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python编写登陆接口的方法
2017/07/10 Python
Python占用的内存优化教程
2019/07/28 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
八年级物理教学反思
2014/01/19 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
村委会贫困证明范本
2014/09/17 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
内勤岗位职责
2015/02/10 职场文书
党委工作总结2015
2015/04/27 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server