why in vue3, the transition component will cause the router to fail to jump？

My router configuration:

  {
    path: '/user',
    name: 'user',
    component: Layout,
    redirect: '/user/detail',
    meta: {
      title: '111',
    },
    children: [
      {
        path: 'detail',
        name: 'UserDetail',
        component: () => import('@/pages/order/userOrder.vue'),
      },
    ],
  },
  {
    path: '/order',
    name: 'order',
    component: Layout,
    redirect: '/order/detail',
    meta: {
      title: '222',
    },
    children: [
      {
        path: 'detail',
        name: 'detail',
        component: () => import('@/pages/order/index.vue'),
      },
    ],
  },

My components:

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

If I enter the url directly from the browser's address bar, both two pages(user and order) will display normally, but if I open one page and then try to use routing to jump to another page, the url will change normally, but the router-view will disappear.

If I delete redirect of the first or the second route, router will also work well.
The console never gives an error.
Adding a :key="route.fullPath" to the component is unuseful.

After investigation, I found that the transition component caused this phenomenon. If I delete the transition component, the route can jump normally.

After a long troubleshooting process, I finally found out that the cause was that one component didn't have a root node. transition cannot animate components that do not have a root node, so the page cannot be rendered. But strangely, the transition doesn't give a warning (normally the transition should give a warning).
Edit: The problem appeared again, but fortunately it only appeared in a single page. But this page already has a root node! I tried to delete everything that was irrelevant. Until I deleted everything on the page, only the following things were left, but the problem still existed!

<template>
  <!-- some annotations  -->
  <div></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less"></style>

The source of the problem was obvious: the annotation at the same level as the root node was causing the transition to not render! I removed the annotation and everything worked fine.