fix(transition): support transition to teleport component child

[yangxiuxiu1115]

fix #11910

Summary by CodeRabbit

• Bug Fixes

  • Improved transitions for components that render teleported content.
  • Transition states and animations now apply correctly to the actual rendered content.
  • Improved transition behavior for components using cached or dynamically changing content.

• Tests

  • Added coverage for enter and leave transitions, including final content placement for teleported elements.
  • Added regression coverage for empty teleported content and changing transition states.

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11959

npm i https://pkg.pr.new/@vue/compiler-core@11959

yarn add https://pkg.pr.new/@vue/compiler-core@11959.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11959

npm i https://pkg.pr.new/@vue/compiler-dom@11959

yarn add https://pkg.pr.new/@vue/compiler-dom@11959.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11959

npm i https://pkg.pr.new/@vue/compiler-sfc@11959

yarn add https://pkg.pr.new/@vue/compiler-sfc@11959.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11959

npm i https://pkg.pr.new/@vue/compiler-ssr@11959

yarn add https://pkg.pr.new/@vue/compiler-ssr@11959.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11959

npm i https://pkg.pr.new/@vue/reactivity@11959

yarn add https://pkg.pr.new/@vue/reactivity@11959.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11959

npm i https://pkg.pr.new/@vue/runtime-core@11959

yarn add https://pkg.pr.new/@vue/runtime-core@11959.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11959

npm i https://pkg.pr.new/@vue/runtime-dom@11959

yarn add https://pkg.pr.new/@vue/runtime-dom@11959.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11959

npm i https://pkg.pr.new/@vue/server-renderer@11959

yarn add https://pkg.pr.new/@vue/server-renderer@11959.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11959

npm i https://pkg.pr.new/@vue/shared@11959

yarn add https://pkg.pr.new/@vue/shared@11959.tgz

vue

pnpm add https://pkg.pr.new/vue@11959

npm i https://pkg.pr.new/vue@11959

yarn add https://pkg.pr.new/vue@11959.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11959

npm i https://pkg.pr.new/@vue/compat@11959

yarn add https://pkg.pr.new/@vue/compat@11959.tgz

commit: 17ce1f3

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	107 kB (+71 B)	40.5 kB (+30 B)	36.3 kB (+38 B)
vue.global.prod.js	166 kB (+71 B)	60.6 kB (+34 B)	53.9 kB (+78 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.6 kB (+388 B)	19.2 kB (+111 B)	17.6 kB (+110 B)
createApp	57.7 kB (+376 B)	22.3 kB (+107 B)	20.4 kB (+109 B)
createSSRApp	62.3 kB (+376 B)	24.2 kB (+101 B)	22 kB (+92 B)
defineCustomElement	63.9 kB (+376 B)	24.2 kB (+120 B)	22.1 kB (+104 B)
overall	72 kB (+71 B)	27.5 kB (+25 B)	25.1 kB (+22 B)

[gcaaa31928]

Another real-world case for this: we maintain a Vue 3 component library whose Portal component renders a as its root (it owns popup alignment + z-index). Any consumer writing the natural thing —

<Transition name="fade">
  <Portal v-if="open"> … </Portal>
</Transition>

— gets no transition at all, plus the Component inside renders non-element root node that cannot be animated warning. Reproduced on 3.5.27.

We ended up polyfilling this PR's exact approach in userland: inside the portal's render we read getCurrentInstance().vnode.transition and call setTransitionHooks() on the vnode we place inside the . Both enter and leave then behave correctly — a small data point that forwarding the hooks to the teleported child is the right fix.

Is this targeted at a particular minor? We're happy to keep the workaround until then, just want to know whether to plan around it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Transition handling now resolves a component’s inner child before validating and applying hooks. This supports components that render teleported content. Tests cover runtime regressions and end-to-end transition behavior.

Changes

Teleport transition handling

Layer / File(s)	Summary
Resolve and apply transition hooks packages/runtime-core/src/components/BaseTransition.ts, packages/runtime-core/src/componentRenderUtils.ts	getInnerChild is exported. Component transition processing uses the resolved Teleport inner child for root validation and hook application.
Validate transition behavior packages/runtime-core/__tests__/components/BaseTransition.spec.ts, packages/vue/__tests__/e2e/Transition.spec.ts	Tests cover Teleport and KeepAlive roots, empty roots, hook updates, warnings, placement, transition classes, completion, and cleanup.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Component
  participant BaseTransition
  participant Teleport
  participant TeleportTarget
  Component->>BaseTransition: render component subtree
  BaseTransition->>Teleport: resolve inner child
  Teleport-->>BaseTransition: return inner child
  BaseTransition->>TeleportTarget: apply enter or leave hooks
  TeleportTarget-->>BaseTransition: complete transition and cleanup

Loading

Possibly related PRs

• vuejs/core#15133: Both PRs modify BaseTransition hook handling, but they address different rendering paths.
• vuejs/core#15159: Both PRs modify BaseTransition child and hook preparation logic for Teleport-related behavior.

Suggested labels: scope: teleport

Suggested reviewers: edison1105

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes forward transition handling to Teleport inner children and add regression coverage for issue #11910 objectives.
Out of Scope Changes check	✅ Passed	All implementation and test changes directly support Transition behavior for components whose root is Teleport.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: supporting transitions for a component child whose root is a Teleport.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
router	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
radix-vue	✅ success	❌ failure
vue-simple-compiler	✅ success	✅ success
vant	✅ success	✅ success
primevue	✅ success	✅ success
language-tools	✅ success	❌ failure
nuxt	✅ success	❌ failure
quasar	✅ success	✅ success
pinia	✅ success	✅ success
vuetify	✅ success	✅ success
test-utils	✅ success	✅ success
vueuse	✅ success	❌ failure
vue-i18n	✅ success	✅ success
vitepress	✅ success	✅ success
vue-macros	✅ success	✅ success