How to eliminate the warning, the combination of router-view and transition?

[linkscope]

🧐 Problem Description

Hello, Now I want transition is nested in router-view, but I recevied a warning from vue: Component inside <Transition> renders non-element root node that cannot be animated. But it still work! In order to remove this warning, I tried to add a div tag as the root node of component, but it can't work! Please tell me how to resolve this problem.

💻 Sample code

{/* could work, but have warning */}
<RouterView>
              {({ Component }: { Component: any }) => (
                <Transition
                  enterActiveClass={classes.contentEnterActive}
                  leaveActiveClass={classes.contentEnterActive}
                  enterFromClass={classes.contentEnter}
                  leaveToClass={classes.contentLeave}
                >
                  <Component />
                </Transition>
              )}
            </RouterView>

{/* couldn't work, but have no warning */}
<RouterView>
              {({ Component }: { Component: any }) => (
                <Transition
                  enterActiveClass={classes.contentEnterActive}
                  leaveActiveClass={classes.contentEnterActive}
                  enterFromClass={classes.contentEnter}
                  leaveToClass={classes.contentLeave}
                >
                  <div><Component /></div>
                </Transition>
              )}
            </RouterView>