Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-o2wgpe?file=src/App.vue

Steps to reproduce

1. click bug
2. click normal

What is expected?

When you click normal, it should show 'this is normal'. Bug now, it show blank page.

What is actually happening?

When you use transition tag's mode="out-in" and in the page use multiple root tags, it will show blank page.

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

I see this warn: Component inside renders non-element root node that cannot be animated. But if i remove mode="out-in", console also show this warn. So i think it is bug. It should render a strange animation instead of a straight white screen.

System Info

No response

Any additional comments?

I don't know this bug is produced in vue or vue-router, if it's vue-router's bug, please tell me. Here are some other cases: https://stackoverflow.com/questions/66411838/vue-3-0-router-components-transition-does-not-work-with-mode-out-in

I find this in vue 3 document, but when i remove mode="out-in", it work. Why? This behaves as if the docs are outdated. tell a joke: it is a feature not a bug.