vue3 Component inside ＜Transition＞ renders non-element root node that cannot be animated.

 This is the non-element root node for which component rendering in <Transition> cannot be animated. 

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

Check which routing components in router-view have multiple elements, just change it to a root element

Like this, this is vue3 supports multiple root elements, but transition effects only support one root element

<template>
    <div>
        <div>数据报告</div>
        <button class="#626aef">按钮</button>
        <el-button color="#626aef" plain>Default</el-button>
    </div>
</template>