找回密码
 立即注册
首页 业界区 业界 Vue3 在给路由跳转增加动画之后,跳转时页面会出现上下 ...

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

彼瞄 5 天前
1.gif

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

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

我在为路由跳转增加了一个动画,如下:
  1. <template>
  2.     <router-view v-slot="{Component}">
  3.         <transition name="fade" mode="out-in">
  4.             <component :is="Component"></component>
  5.         </transition>
  6.     </router-view>
  7. </template>
复制代码
加完之后发现,有的页面可以正常加载动画,有的页面就有抖动问题,后来发现控制台有如下的警告信息:
2.png

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

  • 旧代码:
  1. <template>
  2.     <p>第一行</p>
  3.     <p>第二行</p>
  4. </template>
复制代码

  • 新代码:
  1. <template>
  2.    
  3.         <p>第一行</p>
  4.         <p>第二行</p>
  5.    
  6. </template>
复制代码
使用div包裹两个p标签,保证组件内部只有一个根节点
步骤2(增加离开过渡的css样式 v-leave-to)

我们在 style 中再加一行离开过渡的样式,让页面不占位即可,代码如下,:
  1. .fade-leave-to {
  2.     display: none;
  3. }
复制代码
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册