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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,下面这篇文章主要给大家介绍了关于vue Keep-alive组件缓存的简单使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
uniapp微信小程序使用webview嵌套uniappH5并实现通信详细步骤
在开发微信小程序的时候,我们有时候会遇到将H5页面嵌入到小程序页面中的情况,这篇文章主要给大家介绍了关于uniapp微信小程序使用webview嵌套uniappH5并实现通信的详细步骤,需要的朋友可以参考下2024-05-05
这篇文章主要给大家介绍了关于Vue项目打包为exe可安装程序操作步骤的相关资料,Vue是一种流行的JavaScript框架,用于构建单页面应用程序(SPA),需要的朋友可以参考下2023-12-12
这篇文章主要介绍了手写Vue2.0 数据劫持的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了在vue中import()语法不能传入变量的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2024-01-01
组件是可以在它们自己的模板中调用自身的,不过它们只能通过 name 选项来做这件事,下面这篇文章主要给大家介绍了关于Vue组件化开发的必备技能之组件递归的相关资料,需要的朋友可以参考下2022-01-01
Axios 毋庸多说大家在前端开发中常用的一个发送 HTTP 请求的库，用过的都知道,篇文章主要给大家介绍了关于vue中如何简单封装axios的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了Vue3中如何使用fullcalendar日历插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
vue中v-for和v-if一起使用之使用compute的示例代码
这篇文章主要介绍了vue中v-for和v-if一起使用之使用compute的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05
最新评论