fix(transitionGroup): inner children should skip comment node (#1105)

vuejs · May 4, 2020 · 26a50ce · 26a50ce
1 parent 3c60d40
commit 26a50ce
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
@@ -101,7 +101,8 @@ const TransitionGroupImpl = {
       const cssTransitionProps = resolveTransitionProps(rawProps)
       const tag = rawProps.tag || Fragment
       prevChildren = children
-      children = getTransitionRawChildren(slots.default ? slots.default() : [])
+      const slotChildren = slots.default ? slots.default() : []
+      children = getTransitionRawChildren(slotChildren)
 
       for (let i = 0; i < children.length; i++) {
         const child = children[i]
@@ -110,7 +111,7 @@ const TransitionGroupImpl = {
             child,
             resolveTransitionHooks(child, cssTransitionProps, state, instance)
           )
-        } else if (__DEV__ && child.type !== Comment) {
+        } else if (__DEV__) {
           warn(`<TransitionGroup> children must be keyed.`)
         }
       }
@@ -126,7 +127,7 @@ const TransitionGroupImpl = {
         }
       }
 
-      return createVNode(tag, null, children)
+      return createVNode(tag, null, slotChildren)
     }
   }
 }
@@ -138,7 +139,9 @@ function getTransitionRawChildren(children: VNode[]): VNode[] {
     // handle fragment children case, e.g. v-for
     if (child.type === Fragment) {
       ret = ret.concat(getTransitionRawChildren(child.children as VNode[]))
-    } else {
+    }
+    // comment should be skip, e.g. v-if
+    if (child.type !== Comment) {
       ret.push(child)
     }
   }