vue页面跳转过渡动画与防止抖动方式
更新时间：2026年03月24日 09:13:48 作者：言念君君子
这篇文章主要介绍了vue页面跳转过渡动画与防止抖动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
整页跳转动画
总是看到别人的页面有个淡入淡出效果，但是自己一直不知道怎么实现，感觉不能是每个组件都加一个动画，于是我去看了vue的官方文档。
官方给了这两个东西：
<transition> 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ，可以通过 tag attribute 配置哪个元素应该被渲染。（详细内容见官方文档）
经过我一番查找研究，弄明白了应该怎么使用：
采用<transition> 包裹住路由，这样就可以实现路由页面跳转整个页面元素的动态：
<transition>
<router-view></router-view>
</transition>
上面的内容自己根据官方文档给transition写个动画就也可以实现。
页面抖动
但是实现了之后发现，点击页面跳转时页面有个细微的往上跑一下就停住，像是抖动一样。
我查的资料有的说是页面高度不对需要调整overflow-x和overflow-y，也有的说是路由跳转的时候上一个路由还占着位置因此用.fade-leave-to属性，我试了好像也没什么反应。
后来我发现了一个很简单的解决方法，就是给<transition>加一个 mode="out-in":
<transition mode="out-in">
<router-view></router-view>
</transition>
这样就完美解决抖动了！
我的代码
我用的是ElementUI组件库，因此代码是
<transition name="el-fade-in-linear" mode="out-in">
<router-view></router-view>
</transition>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue3 axios配置以及cookie的使用方法,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue路由前进后退动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12
过渡Vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果这篇文章主要给大家介绍了关于如何利用vue实现css过渡和动画的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要为大家详细介绍了vue.js事件循环机制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
本文介绍了五种刷新Vue当前组件的方法：使用location.reload()、路由刷新、v-if或key属性、beforeRouteUpdate导航守卫以及$forceUpdate,每种方法都有其适用场景和优缺点,需要的朋友可以参考下2025-02-02
目前本人再使用vue-element-admin项目时都是通过直接删除一些用不上的路由来进行侧边栏的清除，但是其实有一个更加好的办法来对项目的侧边栏显示的内用进行管理，就是权限管理，其实也不知道这个方法好不好，原理上来说时跟直接删除该路由的方式时一样的2022-08-08
这篇文章主要给大家分享了 v-bind的使用和注意需要注意的点，下面文章围绕 v-bind指令的相关资料展开内容且附上详细代码 需要的小伙伴可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要介绍了提高vue.js中大型数据的性能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue复杂表格单元格合并根据数据动态合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
最新评论