fix(BaseTransition): collect correct children with slot passthrough i…

…n `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