From f9a42664cea9bbc68743a9eeb80c67d29a1c3068 Mon Sep 17 00:00:00 2001
From: czh740132583 <740132583@qq.com>
Date: Wed, 13 Apr 2022 18:23:58 +0800
Subject: [PATCH] fix(runtime-core): when Transition reports a warning about
 'can only be used on a single element or component', it ignores the comments
 node

---
 packages/runtime-core/src/components/BaseTransition.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 27bfb5f523a..96c89b1d81e 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -20,6 +20,7 @@ import { ShapeFlags, PatchFlags } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
 import { RendererElement } from '../renderer'
 
+
 export interface BaseTransitionProps<HostElement = RendererElement> {
   mode?: 'in-out' | 'out-in' | 'default'
   appear?: boolean
@@ -140,16 +141,19 @@ const BaseTransitionImpl: ComponentOptions = {
     const state = useTransitionState()
 
     let prevTransitionKey: any
-
+    const filterCommentChild = (children:Array<VNode>) =>{
+      return children.filter((child:VNode)=>{
+        return child.type !== Comment
+      })
+    }
     return () => {
       const children =
         slots.default && getTransitionRawChildren(slots.default(), true)
       if (!children || !children.length) {
         return
       }
-
       // warn multiple elements
-      if (__DEV__ && children.length > 1) {
+      if (__DEV__ && filterCommentChild(children).length > 1) {
         warn(
           '<transition> can only be used on a single element or component. Use ' +
             '<transition-group> for lists.'