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

fix #5675

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index c8a9459437162dcb6369547cafcdcf25e8731592..64249f8c4efffb98c02905d6e7031a93697140e8 100644 (file)
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -148,12 +148,25 @@ const BaseTransitionImpl: ComponentOptions = {
         return
       }
 
-      // warn multiple elements
-      if (__DEV__ && children.length > 1) {
-        warn(
-          '<transition> can only be used on a single element or component. Use ' +
-            '<transition-group> for lists.'
-        )
+      let child: VNode = children[0]
+      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-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)
       }

diff --git a/packages/vue/__tests__/Transition.spec.ts b/packages/vue/__tests__/Transition.spec.ts
index 372049395118ecd8e4f389c077f6123cd2cca890..9ec7e6ca6ac4a3fd21d66fb1d2b3de9bf2697016 100644 (file)
--- a/packages/vue/__tests__/Transition.spec.ts
+++ b/packages/vue/__tests__/Transition.spec.ts
@@ -2039,7 +2039,7 @@ describe('e2e: Transition', () => {
           template: `
             <div id="container">
               <transition>
-                <Comp class="test" v-if="toggle">      
+                <Comp class="test" v-if="toggle">
                   <div>content</div>
                 </Comp>
               </transition>