fix(BaseTransition): collect correct children with slot passthrough in `Transition` (#1456)

fix #1455

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

@@ -8,7 +8,8 @@ import {
   Comment,
   isSameVNodeType,
   VNode,
-  VNodeArrayChildren
+  VNodeArrayChildren,
+  Fragment
 } from '../vnode'
 import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
@@ -135,7 +136,10 @@ const BaseTransitionImpl = {
     const state = useTransitionState()
 
     return () => {
-      const children = slots.default && slots.default()
+      const children = getTransitionRawChildren(
+        slots.default ? slots.default() : [],
+        true
+      )
       if (!children || !children.length) {
         return
       }
@@ -417,3 +421,27 @@ export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
     vnode.transition = hooks
   }
 }
+
+export function getTransitionRawChildren(
+  children: VNode[],
+  keepComment: boolean = false
+): VNode[] {
+  let ret: VNode[] = []
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]
+    // handle fragment children case, e.g. v-for
+    if (child.type === Fragment) {
+      ret = ret.concat(
+        getTransitionRawChildren(child.children as VNode[], keepComment)
+      )
+    }
+    // comment placeholders should be skipped, e.g. v-if
+    else if (
+      child.type !== Comment ||
+      (child.type === Comment && keepComment)
+    ) {
+      ret.push(child)
+    }
+  }
+  return ret
+}

packages/runtime-core/src/index.ts

@@ -91,7 +91,8 @@ export { registerRuntimeCompiler } from './component'
 export {
   useTransitionState,
   resolveTransitionHooks,
-  setTransitionHooks
+  setTransitionHooks,
+  getTransitionRawChildren
 } from './components/BaseTransition'
 
 // Types -----------------------------------------------------------------------

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -9,11 +9,11 @@ import {
 } from './Transition'
 import {
   Fragment,
-  Comment,
   VNode,
   warn,
   resolveTransitionHooks,
   useTransitionState,
+  getTransitionRawChildren,
   getCurrentInstance,
   setTransitionHooks,
   createVNode,
@@ -129,22 +129,6 @@ const TransitionGroupImpl = {
   }
 }
 
-function getTransitionRawChildren(children: VNode[]): VNode[] {
-  let ret: VNode[] = []
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    // handle fragment children case, e.g. v-for
-    if (child.type === Fragment) {
-      ret = ret.concat(getTransitionRawChildren(child.children as VNode[]))
-    }
-    // comment placeholders should be skipped, e.g. v-if
-    else if (child.type !== Comment) {
-      ret.push(child)
-    }
-  }
-  return ret
-}
-
 // remove mode props as TransitionGroup doesn't support it
 delete TransitionGroupImpl.props.mode