fix(transition): handle transition for v-if branches with comment

fix #5675

packages/runtime-core/src/components/BaseTransition.ts

@@ -148,12 +148,25 @@ const BaseTransitionImpl: ComponentOptions = {
         return
       }
 
-      // warn multiple elements
+      let child: VNode = children[0]
-      if (__DEV__ && children.length > 1) {
+      if (children.length > 1) {
+        let hasFound = false
+        // locate first non-comment child
+        for (const c of children) {
+          if (c.type !== Comment) {
+            if (__DEV__ && hasFound) {
+              // warn more than one non-comment child
               warn(
-          '<transition> can only be used on a single element or component. Use ' +
+                '<transition> can only be used on a single element or component. ' +
-            '<transition-group> for lists.'
+                  'Use <transition-group> for lists.'
               )
+              break
+            }
+            child = c
+            hasFound = true
+            if (!__DEV__) break
+          }
+        }
       }
 
       // there's no need to track reactivity for these props so use the raw
@@ -171,8 +184,6 @@ const BaseTransitionImpl: ComponentOptions = {
         warn(`invalid <transition> mode: ${mode}`)
       }
 
-      // at this point children has a guaranteed length of 1.
-      const child = children[0]
       if (state.isLeaving) {
         return emptyPlaceholder(child)
       }