fix(BaseTransition): collect correct children with Transition slot

fix vuejs#1455
underfin · Jun 27, 2020 · 9dc9947 · 9dc9947
1 parent 0dd5cde
commit 9dc9947
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/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,9 @@ const BaseTransitionImpl = {
     const state = useTransitionState()
 
     return () => {
-      const children = slots.default && slots.default()
+      const children = getTransitionRawChildren(
+        slots.default ? slots.default() : []
+      )
       if (!children || !children.length) {
         return
       }
@@ -417,3 +420,19 @@ export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
     vnode.transition = hooks
   }
 }
+
+export 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
+}
diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
@@ -9,7 +9,6 @@ import {
 } from './Transition'
 import {
   Fragment,
-  Comment,
   VNode,
   warn,
   resolveTransitionHooks,
@@ -22,6 +21,7 @@ import {
 } from '@vue/runtime-core'
 import { toRaw } from '@vue/reactivity'
 import { extend } from '@vue/shared'
+import { getTransitionRawChildren } from '../../../runtime-core/src/components/BaseTransition'
 
 interface Position {
   top: number
@@ -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