From 62eba63172414ae0aa895d4b1927c7889c398f2f Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 14 Apr 2022 18:06:52 +0800
Subject: [PATCH] fix(transition): handle transition for v-if branches with
 comment

fix #5675
---
 .../src/components/BaseTransition.ts          | 27 +++++++++++++------
 packages/vue/__tests__/Transition.spec.ts     |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index c8a94594..64249f8c 100644
--- 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 37204939..9ec7e6ca 100644
--- 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>