Vue3 在给路由跳转增加动画之后，跳转时页面会出现上下抖动的问题

彼瞄 · 2025-6-6 18:53:04

这个问题需要分以下两个步骤解决：

检查抖动的页面组件是否有多个根节点
增加离开过渡的css样式 v-leave-to: {display: none}

步骤1（检查抖动的页面组件是否有多个根节点）

我在为路由跳转增加了一个动画，如下：

<template>
<router-view v-slot="{Component}">
<transition name="fade" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</template>

复制代码

加完之后发现，有的页面可以正常加载动画，有的页面就有抖动问题，后来发现控制台有如下的警告信息：

问题解释如下：
警告信息表明你在使用 Vue 的组件时遇到了问题。组件要求它包裹的内容只能有一个根元素，这是因为 Vue 的过渡效果需要针对单个元素进行动画处理。
如果你的组件内部渲染了多个元素，Vue 就无法为这些元素应用动画效果，因此会抛出这个警告。
改造代码：
大家看到哪个页面组件有抖动现象，检查下代码是不是有多个根节点。比如我们发现 A组件页面有多个根节点，如下：

旧代码：

<template>
<p>第一行</p>
<p>第二行</p>
</template>

复制代码

新代码：

<template>
<p>第一行</p>
<p>第二行</p>
</template>

复制代码

使用div包裹两个p标签，保证组件内部只有一个根节点
步骤2（增加离开过渡的css样式 v-leave-to）

我们在 style 中再加一行离开过渡的样式，让页面不占位即可，代码如下，：

.fade-leave-to {
display: none;
}

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

艾曼语 · 2025-11-28 12:54:51

用心讨论，共获提升！

账号		自动登录	找回密码
密码			立即注册

Vue3 在给路由跳转增加动画之后，跳转时页面会出现上下抖动的问题

相关帖子

回复

签约作者

Vue3 在给路由跳转增加动画之后，跳转时页面会出现上下抖动的问题

相关帖子

相关推荐

回复

签约作者