Vue鼠标滚轮滚动切换路由效果的实现方法


Posted in Vue.js onAugust 04, 2021

一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件)
在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听
当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听

Vue路由切换过渡

vue的过渡

<transition :name="transitionName">
      <div></div>
 </transition>

使用transition 包裹需要过渡的组件, 或者是一个div, 或者是一个路由, 当这个创建或者销毁的时候, 会加载指定的动画效果, 这个动画效果需要自己指定, 这里指定的是transitionName

然后在data里面声明这个, 但是这个值赋值为' ', 因为需要根据路由向前或者向后对应不同的name

当路由向前(这里是向下), 指定为slide-down

然后定义slide-down的不同状态下的激活效果为过渡效果

.slide-down-enter-active,
.slide-down-leave-active {
transition: all 500ms;
position: absolute;
}

 

随后定义进入开始动画

.slide-down-enter {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

定义离开激活动画

.slide-down-leave-active {
opacity: 0;
transform: translate3d(0, -100%, 0);
}

下面是一般是固定
即声明-enter-active, -leave-active为过渡效果
随后写-enter, -leave-active具体需要的变化
一般就是一个-enter, 一个-leave-active

Vue鼠标滚轮滚动切换路由效果的实现方法

接着就是怎么判断路由向前还是向后
首先是怎么向前向后切换路由

接着是怎么判断是前还是后, 在写路由的时候, 写上meta, 通过在"根组件"里监视路由变化时, 拿到路由信息, 对比这两个的大小来判断

Vue鼠标滚轮滚动切换路由效果的实现方法Vue鼠标滚轮滚动切换路由效果的实现方法

到此这篇关于Vue鼠标滚轮滚动切换路由效果的实现方法的文章就介绍到这了,更多相关Vue切换路由内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
Vue3.0 手写放大镜效果
vue项目多环境配置(.env)的实现
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
idea编译器vue缩进报错问题场景分析
Vue实现导入Excel功能步骤详解
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
社团活动策划书范文
2014/01/09 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
上诉状格式
2015/05/23 职场文书
五一晚会主持词
2015/07/01 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
MySQL的索引你了解吗
2022/03/13 MySQL