transition 属性 加上 mode=“out-in“ 页面跳转出现空白

</template>
<router-view v-slot="{ Component, route }"><template v-if="Component"><Transition name="fade-transform" mode="out-in"><KeepAlive><component :is="Component" :key="route.name"></component></KeepAlive></Transition></template>
</router-view>
<template>
<style scoped lang="scss">
/* fade-transform  过渡动画*/
.fade-transform-leave-active,
.fade-transform-enter-active {transition: all 0.5s;
}
.fade-transform-enter-from {opacity: 0;transform: translateX(-30px);
}
.fade-transform-leave-to {opacity: 0;transform: translateX(30px);
}
</style>

TIP
仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

参考链接：https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component

<component :is="Component" :key="route.name"></component> 这个里面的内容也必须是一个根组件，注释也算根节点

例如：我有一个首页是长这样的：

<template><div class="home"><img class="home-bg" src="@/assets/img/welcome.png" alt="welcome" /></div><!-- 我是注释 -->
</template>

肯定会出现空白

修改为如下内容就可以:

<template><div class="home"><img class="home-bg" src="@/assets/img/welcome.png" alt="welcome" /><!-- 我是注释 --></div>
</template>

我的解决方式也是参考这篇文章的：https://blog.csdn.net/weixin_50587417/article/details/130677856