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

一、问题代码

<template><section><router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><component :is="Component" :key="$route.path" /></transition></router-view></section></template>

二、 问题分析

<Transition>中的组件不能呈现动画的非元素根节点。 也就是说，Transition包裹的必须是一个单根的组件。

三、问题解决

将非单根节点变为单根节点即可

<template><section><router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><div :key="$route.path"> <component :is="Component"></component></div></transition></router-view></section></template>