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 相关文章推荐
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
详解使用vue-admin-template的优化历程
May 20 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
Yii遍历行下每列数据的方法
2016/10/17 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
推荐dojo学习笔记
2007/03/24 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
初步探究Python程序的执行原理
2015/04/11 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
浅析Python中字符串的intern机制
2020/10/03 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
擅自离岗检讨书
2014/09/12 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python