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下function声明一些小结
Dec 28 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
分享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
几种显示数据的方法的比较
2006/10/09 PHP
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Use Word to Search for Files
2007/06/15 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
基本DOM节点操作
2017/01/17 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
17个Python小技巧分享
2015/01/23 Python
Python中操作符重载用法分析
2016/04/29 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
优秀三好学生事迹材料
2014/08/31 职场文书
师德师风自我评价范文
2014/09/11 职场文书
毕业生个人总结
2015/02/28 职场文书