diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index e68b4749738..85cc55868b7 100644 --- 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 index 34d8466e0fd..68b26290841 100644 --- 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