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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
基本DOM节点操作
Jan 17 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Bootstrap table使用方法总结
May 10 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
原生JS实现留言板功能
Feb 08 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正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python读写ini文件的方法
2015/05/28 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python实现滑雪者小游戏
2020/02/22 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
机电职业生涯规划书范文
2014/03/08 职场文书
寄语学生的话
2014/04/10 职场文书
商务助理求职信范文
2014/04/20 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
教师党员自我评价范文
2015/03/04 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript