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实现省市区三级联动
Dec 27 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
php报错502badgateway解决方法
2019/10/11 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
Vuex提升学习篇
2018/01/11 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python多进程写入同一文件的方法
2019/01/14 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
pytorch进行上采样的种类实例
2020/02/18 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
详解Python流程控制语句
2020/10/28 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
DataReader和DataSet的异同
2014/12/31 面试题
培训自我鉴定
2014/01/31 职场文书
大学生活动策划方案
2014/02/10 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
商场促销活动总结
2014/07/10 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
话题作文之诚信
2019/11/28 职场文书
python 对图片进行简单的处理
2021/06/23 Python