Vue 解决路由过渡动画抖动问题(实例详解)

前言

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

效果

图中可以很明显的看到，切换路由时，页面会发生抖动，而且抖动的还不小，看着强迫症都犯了。
那么问题来了，为什么会出现这种情况?

过程

发现问题

排除代码问题后，想到的可能是布局问题引发的这种情况，于是在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 解决路由过渡动画抖动问题，希望对大家有所帮助！

赞 (0)

相关推荐

  • Vue 让元素抖动/摆动起来的实现代码

    首先展示一下效果,狠狠点击 https://zhangkunusergit.github.io/vue-component/dist/jitter.html 代码github : https://github.com/zhangKunUserGit/vue-component 先说一下用法: <jitter :start.sync="抖动控制器" :range="{ 包含x,y, z }" :shift-percent="0.1">

  • Vue 路由 过渡动效 数据获取方法

    过渡动效 <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition> <router-view></router-view> </transition> 单个路由的过渡 上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition> 并设置不同的 name. 基于路由的动态过

  • Vue 解决路由过渡动画抖动问题(实例详解)

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

  • vue开发设计分支切换与cleanup实例详解

    目录 分支切换与cleanup 了解分支切换 分支切换导致的问题 如何清除掉副作用函数的无效关联关系? 疑问:为什么对传入的副作用函数进行一层包裹? 完整代码 产生的问题:代码运行发生栈溢出 如何解决此种情况下的栈溢出? 嵌套的effect与effect栈 effect嵌套的场景? 初始化 原因: 支持嵌套 避免无限递归循环 产生无限递归循环的代码: 原因分析: 解决循环 完整代码 分支切换与cleanup 了解分支切换 代码示例如下 const data = { ok: true, text:

  • Android隐藏标题栏及解决启动闪过标题的实例详解

    Android隐藏标题栏及解决启动闪过标题的实例详解 方法一: 在代码中设置 this.requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 方法二: 在AndroidManifest.xml 里面设置 <application android:icon="@drawable/icon" android:label="@string/app_name" Android:theme="@androi

  • Vue自定义全局Toast和Loading的实例详解

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • Vue触发隐藏input file的方法实例详解

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发     ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • Vue加载中动画组件使用方法详解

    Vue加载中动画组件使用方法详解

    本文实例为大家分享了Vue加载中动画组件的使用,供大家参考,具体内容如下 (模仿ant-design加载中样式)效果图如下: ①创建Loading.vue组件: <template>   <div class="m-spin-dot">     <span class="u-dot-item"></span>     <span class="u-dot-item"></span&

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

随机推荐