vue页面跳转过渡动画与防止抖动

目录

  • 整页跳转动画
  • 页面抖动
  • 我的代码

整页跳转动画

总是看到别人的页面有个淡入淡出效果,但是自己一直不知道怎么实现,感觉不能是每个组件都加一个动画,于是我去看了vue的官方文档。

官方给了这两个东西:

<transition> 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ,可以通过 tag attribute 配置哪个元素应该被渲染。(详细内容见官方文档)

经过我一番查找研究,弄明白了应该怎么使用:
采用<transition> 包裹住路由,这样就可以实现路由页面跳转整个页面元素的动态:

<transition><router-view></router-view>
</transition>

上面的内容自己根据官方文档给transition写个动画就也可以实现。

页面抖动

但是实现了之后发现,点击页面跳转时页面有个细微的往上跑一下就停住,像是抖动一样。
我查的资料有的说是页面高度不对需要调整overflow-xoverflow-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802177.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡 SD/MicroSD/TF卡是基于FLASH的一种常见非易失存储单元&#xff0c;由接口协议电路和FLASH构成。市面上由不同尺寸和不同容量的卡&#xff0c;手机领域用的TF卡实际就是MicroSD卡&#xff0c;尺寸比SD卡小&#xff0c;而电路和协…

基于Java SpringBoot+Vue的体育用品库存管理系统

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

力扣739. 每日温度

Problem: 739. 每日温度 文章目录 题目描述思路复杂度Code 题目描述 思路 若本题目使用暴力法则会超时&#xff0c;故而使用单调栈解决&#xff1a; 1.创建结果数组res&#xff0c;和单调栈stack&#xff1b; 2.循环遍历数组temperatures&#xff1a; 2.1.若当stack不为空同时…

如何判断一个linux机器是物理机还是虚拟机

https://blog.csdn.net/qq_32262243/article/details/132571117 第一种方式&#xff1a;dmesg命令 [rootnshqae01adm03 ~]# dmesg | grep -i hypervisor [ 0.000000] Hypervisor detected: Xen PV [ 1.115297] VPMU disabled by hypervisor. 在我的机器上 dmesg也是能够用来判…

【C语言】扫雷【附源码】

一、扫雷游戏规则 尽快找到雷区中的所有不是地雷的格子,而不许踩到地雷。点开的数字是几&#xff0c;则说明该数字旁边的8个位置中有几个雷&#xff0c;如果挖开的是地雷&#xff0c;则会输掉游戏。 二、代码思路&#xff1a; 宏定义&#xff1a; Row 和 Col 定义了棋盘的行数和…

计算机研究生规划

一、计算机研究生技术栈 两条腿走路: 左侧工程实践能力&#xff1a;要掌握python编程语言&#xff0c;它和机器学习、神经网络&#xff08;这两门几乎是必须掌握的技能&#xff09;的学习有很大关系 右侧学术创新能力 二、编程语言能力提升 左边基础&#xff0c;右边教你写…

在ubuntu系统上安装ffmpeg支持rrweb使用rrvideo对视频文件转mp4格式遇到的一些问题及解决办法

在ubuntu系统上安装ffmpeg支持rrweb使用rrvideo对视频文件转mp4格式遇到的一些问题及解决办法 1,ubuntu系统上安装ffmpeg4.4.1稳定版本1,ubuntu系统上安装ffmpeg4.4.1稳定版本 按照ChatGPT3.5来 sudo apt updatesudo apt install build-essential git sudo apt-get instal…

上传应用程序到苹果应用商店的工具和要点

引言 在今天的移动应用市场中&#xff0c;将应用程序上传到苹果应用商店&#xff08;App Store&#xff09;是许多开发者的首要任务之一。然而&#xff0c;不同操作系统下的开发者可能需要使用不同的工具和遵循不同的要求来完成这一任务。本文将介绍在 macOS、Windows 和 Linu…

蓝桥杯算法题:练功

【问题描述】 小明每天都要练功&#xff0c;练功中的重要一项是梅花桩。 小明练功的梅花桩排列成 n 行 m 列&#xff0c;相邻两行的距离为 1&#xff0c;相邻两列的距离也为 1。 小明站在第 1 行第 1 列上&#xff0c;他要走到第 n 行第 m 列上。小明已经练了一段时间&#xff…

gcc/g++:编译阶段翻译成平台汇编代码

编译阶段翻译成平台汇编代码&#xff0c;是在预编译阶段上加码&#xff0c;将C/C代码翻译成平台相关的汇编代码。 示例&#xff1a; 1&#xff09;用户程序 /*brief test demo-for-compile-to-asm? show you hereauthor wenxuanpeiemail 15873152445163.com(query for any q…

OpenHarmony实战:瑞芯微RK3566移植案例(下)

OpenHarmony实战&#xff1a;瑞芯微RK3566移植案例&#xff08;下&#xff09; OpenHarmony实战&#xff1a;瑞芯微RK3566移植案例&#xff08;中&#xff09; WIFI 整改思路及实现流程 整改思路 接下来熟悉HCS文件的格式以及"HDF WIFI”核心驱动框架的代码启动初始化…

大话设计模式——11.桥接模式(Bridge Pattern)

简介 将抽象部分与它的实现部分分离&#xff0c;使它们可以独立变化。 UML图&#xff1a; 应用场景&#xff1a; 系统需要在构建的抽象化角色和具体化角色之间增加更多的灵活性不想使用继承导致系统类的个数急剧增加某个类存在多个变化维度使用继承方式容易出现类的膨胀 示例…

Windows编译运行TensorRT-YOLOv9 (C++)

Windows编译运行yolov9-bytetrack-tensorrt&#xff08;C&#xff09; 1 基础环境2 编译yolov9-bytetrack-tensorrt&#xff08;1&#xff09;下载yolov9-bytetrack-tensorrt源码&#xff08;2&#xff09;修改CMakeLists.txt&#xff08;3&#xff09;CMake编译 3 yolov9模型转…

js怎样控制浏览器前进、后退、页面跳转

window.open(")&#xff1b;--这种方法可以打开新的标签页并在新标签页跳转到页面。 window.open(页面链接) window.location.href"&#xff1b;-这种方法可以直接改变当前页面的地址&#xff0c;不打开新的标签页。 window.location.href页面链接 window…

python+appium调@pytest.mark.parametrize返回missing 1 required positional argument:

出错描述&#xff1a; 1、在做pythonappium自动化测试时&#xff0c;使用装饰器pytest.mark.parametrize&#xff08;“参数”&#xff0c;[值1&#xff0c;值2&#xff0c;值3]&#xff09;&#xff0c;测试脚本执行返回test_xx() missing 1 required positional argument:“…

富格林:谨记合理阻挠虚假方案

富格林悉知&#xff0c;现货黄金作为良好的避险投资产品&#xff0c;受到越来越多人的欢迎。但是对于新手投资者来说&#xff0c;在进行真实交易之前一定要掌握交易的操作技巧&#xff0c;因为缺乏技巧的支撑会让我们难以阻挠虚假操作。在现货黄金市场中&#xff0c;只要稍有不…

【数据结构与算法】:归并排序和计数排序

1. 归并排序 归并排序是一种效率仅次于快速排序的排序算法。它有非递归和递归两种实现方式(本文只讲述递归实现&#xff0c;非递归实现以后有专门的文章)。 其实&#xff0c;归并排序也叫外排序。它不仅可以对内存中的数据进行排序&#xff0c;还能对文件里的数据排序。 比如&…

革新铁路安全管理,RFID电子锁技术提升效率与防护

一、铁路行业的现状与挑战 铁路行业作为全球重要的交通基础设施&#xff0c;承担着庞大的客运和货运任务。随着铁路网络的不断扩张&#xff0c;如何确保铁路资产的安全、提高运营效率、降低维护成本&#xff0c;成为行业面临的主要挑战。传统的铁路资产管理依赖于人工巡检和记…

colmap安装问题汇总

问题目录 问题0、没有root权限怎么安装colmap&#xff1f; 问题1、ERROR: SiftGPU not fully supported/Could not connect to any X display 问题2、Cannot specify include directories for imported target "freeimage::FreeImage". 问题3、could not find ZL4 问…

【GEE】遥感数据趋势分析Sen+mk

Map.centerObject(table);// 定义时间范围 var stary 2001, endy 2023; //NDVI图像集合 var NDVICL ee.ImageCollection(ee.List.sequence(stary, endy).map(function(year) {// 定义每年的开始和结束日期var startd ee.Date.fromYMD(year, 1, 1);var endd ee.Date.fromYM…