公告: 欢迎来到我的博客

>>> 您当前正在: Xiobb's Blog > 文章 > 【备忘录】vue中translation套router-view动画卡顿问题

【备忘录】vue中translation套router-view动画卡顿问题


Xiobb  |  2022年09月17日  |  共 14 次浏览

起因

不知道为什么,使用下面这段代码(elementui 但跟这个问题没有关联)

<transition name="el-fade-in">
        <router-view/>
</transition>

会发现,页面在切换时 新页面会在下方出现,然后闪现到上面.

排查

仔细看会发现,新的页面进入(淡入)与旧页面的退出(淡出)是同时进行的,而旧页面动画播放完成后会自动消失,导致新页面闪现到上方

解决

没错,就这么简单
加一个 mode=“out-in” 给先后顺序即可
上代码!

<transition name="el-fade-in" mode="out-in">
        <router-view/>
</transition>

简单粗暴且有效!


来评论


About me:

Xiobb

干啥啥不行,水文第一名!

给我发邮件


> 文章数量: 17 篇

> 分类数量: 5 个

> 标签数量: 13 个


RSS  |  网站地图  |  回首页  |  回顶  |  后台管理

Copyright © 2022 Xiobb's Blog All Rights Reserved.
郑重声明:未经授权禁止转载、摘编、复制本站内容或建立镜像。

回顶部