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 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python实现上传下载文件功能
2020/11/19 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
高中生的自我鉴定范文
2014/01/24 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
作风年建设汇报材料
2014/08/14 职场文书
重点工程汇报材料
2014/08/27 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
python实现高效的遗传算法
2021/04/07 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python