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代码分享
Mar 25 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
JavaScript实现队列结构过程
Dec 06 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
超级简单的发送邮件程序
2006/10/09 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
python插入排序算法的实现代码
2013/11/21 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python tcp传输代码实例解析
2020/03/18 Python
python datetime处理时间小结
2020/04/16 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
施工资料员岗位职责
2014/01/06 职场文书
秋季运动会稿件
2014/01/30 职场文书
自荐信的格式
2014/03/10 职场文书
幼儿园老师寄语
2014/04/03 职场文书
离职保密承诺书
2014/05/28 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
老公婚前保证书
2015/02/28 职场文书
高三教师工作总结2015
2015/07/21 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js