Vue 解决路由过渡动画抖动问题(实例详解)


Posted in Javascript onJanuary 05, 2020

前言

Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置、路由参数等功能,让单页面应用变得更易于管理。良好的路由管理尤为重要,比如路由拦截、路由懒加载、路由权限等都在开发中起着至关重要的作用。同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的。毕竟做出来,自己看着也舒服。

过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html

过渡动画抖动

代码片段

这里为路由添加一个淡入淡出的过渡效果

<div id="app">
 <main class="app-main">
 <Topbar />
 <transition name="fade">
 <router-view />
 </transition>
 </main>
</div>
.fade-enter,
.fade-leave-to{
 visibility: hidden;
 opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

效果

Vue 解决路由过渡动画抖动问题(实例详解)

图中可以很明显的看到,切换路由时,页面会发生抖动,而且抖动的还不小,看着强迫症都犯了。
那么问题来了,为什么会出现这种情况?

过程

发现问题

排除代码问题后,想到的可能是布局问题引发的这种情况,于是在chrome的调试工具中,一边切换路由一边观察布局的变化,终于找到了一点蹊跷

Vue 解决路由过渡动画抖动问题(实例详解)

仔细观察html的结构,会发现在路由过渡的过程中是会同时存在两个路由,一个是即将进入的路由,一个是即将消失的路由,这时想到有没有可能是其中一个路由占位导致抖动?

印证猜想

为了方便观察布局情况,将过渡的时间调大到30s,再次重复上面的操作

Vue 解决路由过渡动画抖动问题(实例详解)

在缓慢的过渡,可以更加清晰的看到,在切换到下一个路由(fade-enter-to)时,上一个路由(fade-leave-to)会占位使得下一个路由的位置下移,所以在快速过渡的情况才发生类似抖动的效果
既然问题找到了,那就找办法来解决它!

解决问题

只需要给fade-leave-to路由添加 display:none,让其在消失时不占位就可以解决问题。当然还可以使用定位来脱离文档流来解决,但定位之后偏移量等都需要计算,不太推荐。

.fade-enter{
 visibility: hidden;
 opacity: 0;
}
.fade-leave-to{
 display: none;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

最后效果

Vue 解决路由过渡动画抖动问题(实例详解)

总结

以上所述是小编给大家介绍的Vue 解决路由过渡动画抖动问题,希望对大家有所帮助!

Javascript 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 #Javascript
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 #Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 #Javascript
Angular8 实现table表格表头固定效果
Jan 03 #Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 #Javascript
Vue 实现登录界面验证码功能
Jan 03 #Javascript
You might like
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python破解zip加密文件的方法
2018/05/31 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python语言元素知识点详解
2019/05/15 Python
Python shelve模块实现解析
2019/08/28 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
恐龙的灭绝教学反思
2014/02/12 职场文书
高中生评语大全
2014/04/25 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
如何写新闻稿
2015/07/18 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL