diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index c98f1f473bd..a1fb8cde33f 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -1613,6 +1613,36 @@ describe('SSR hydration', () => { `) }) + test('Suspense + transition appear', async () => { + const { vnode, container } = mountWithHydration( + ``, + () => + h(Suspense, {}, () => + h( + Transition, + { appear: true }, + { + default: () => h('div', 'foo'), + }, + ), + ), + ) + + expect(vnode.el).toBe(container.firstChild) + // wait for hydration to finish + await new Promise(r => setTimeout(r)) + + expect(container.firstChild).toMatchInlineSnapshot(` +
+ foo +
+ `) + await nextTick() + expect(vnode.el).toBe(container.firstChild) + }) + // #10607 test('update component stable slot (prod + optimized mode)', async () => { __DEV__ = false diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 82972e17174..c49db529c38 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -385,7 +385,10 @@ export function createHydrationFunctions( let needCallTransitionHooks = false if (isTemplateNode(el)) { needCallTransitionHooks = - needTransition(parentSuspense, transition) && + needTransition( + null, // no need check parentSuspense in hydration + transition, + ) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear