vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)

前言

Vue-Router 作为 Vue 的核心模块，它为我们提供了基于组件的路由配置、路由参数等功能，让单页面应用变得更易于管理。良好的路由管理尤为重要，比如路由拦截、路由懒加载、路由权限等都在开发中起着至关重要的作用。同时路由还支持视图过渡效果，没有添加过渡动画的路由切换会感觉很生硬，为了提高用户体验，路由过渡还是很有必要的。毕竟做出来，自己看着也舒服。

过渡动画抖动

代码片段

这里为路由添加一个淡入淡出的过渡效果

.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;

}

效果

图中可以很明显的看到，切换路由时，页面会发生抖动，而且抖动的还不小，看着强迫症都犯了。

那么问题来了，为什么会出现这种情况?

过程

发现问题

排除代码问题后，想到的可能是布局问题引发的这种情况，于是在chrome的调试工具中，一边切换路由一边观察布局的变化，终于找到了一点蹊跷

仔细观察html的结构，会发现在路由过渡的过程中是会同时存在两个路由，一个是即将进入的路由，一个是即将消失的路由，这时想到有没有可能是其中一个路由占位导致抖动？

印证猜想

为了方便观察布局情况，将过渡的时间调大到30s，再次重复上面的操作

在缓慢的过渡，可以更加清晰的看到，在切换到下一个路由(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图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)相关推荐

android相册和拍照并裁剪图片大小,Android 拍照并对照片进行裁剪和压缩实例详解...
Android 拍照并对照片进行裁剪和压缩实例详解本文主要介绍 Android 调用摄像头拍照并对照片进行裁剪和压缩,文中给出了主要步骤和关键代码. 调用摄像头拍照,对拍摄照片进行裁剪,代码如下. ...
android 清理缓存动画,Android仿微信清理内存图表动画（解决surfaceView屏幕闪烁问题）demo实例详解...
最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生 ...
vue仿今日头条_Vue仿今日头条实例详解
前言 vue也弄了一段时间了,前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了因为也是纯粹的写写前端页面,所以数据方面用的是mock.js, ...
vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
React-Router4 嵌套路由实现的两种方式以及路由过渡动画的实现方式
刚学习react的路由一个小的后台管理demo 目录结构 // 后台管理页面通常有两种布局方式 // 一种是没有导航栏的登录页面 // 一种是含有导航栏的各功能性页面 // 导航栏不需要每次都渲 ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
watch深度监听数组_vue watch普通监听和深度监听实例详解(数组和对象)
vue watch普通监听和深度监听实例详解(数组和对象) 下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
android过渡动画旋转,炫酷的Android过渡动画
[桃花潭水深千尺,不及汪伦送我情] 不知道大家有没有发现,Android版的掘金有下面这个小小动画:点击作者头像跳转到作者的详情页,而作者头像会从当前界面通过动画过渡详情页界面. image 知识贫乏 ...

vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)

vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)相关推荐

最新文章

热门文章