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

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