fix(transition): add key for transition if-branches by edison1105 · Pull Request #14374 · vuejs/core

edison1105 · 2026-01-29T07:24:38Z

Summary by CodeRabbit

New Features
- Transitions now work seamlessly with if/else-if/else conditional chains, including out-in mode support.
Tests
- Added end-to-end tests validating conditional transition sequences.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-29T07:24:47Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This change adds support for keyed transitions in if/else-if/else conditional chains. A compile-time index counter assigns unique identifiers to each if node within transition contexts, enabling the runtime to use keyed DynamicFragment instances for proper transition animations across branch changes.

Changes

Cohort / File(s)	Summary
Tests & Demo `packages-private/vapor-e2e-test/__tests__/transition.spec.ts`, `packages-private/vapor-e2e-test/transition/App.vue`	Adds end-to-end tests and demo blocks for if/else-if/else transition sequences in both default and out-in modes.
Compiler IR & Transform Infrastructure `packages/compiler-vapor/src/ir/index.ts`, `packages/compiler-vapor/src/transform.ts`	Extends IfIRNode with optional index property; adds per-instance ifIndex counter and nextIfIndex() accessor to TransformContext.
Conditional Transform `packages/compiler-vapor/src/transforms/vIf.ts`	Conditionally assigns index to IF operations during transformation when in transition context by invoking nextIfIndex().
Generator `packages/compiler-vapor/src/generators/if.ts`	Threads index parameter through genIf into createIf call when present.
Runtime Support `packages/runtime-vapor/src/apiCreateIf.ts`	Accepts optional index parameter and uses keyed DynamicFragment variant when provided; computes key from index and condition outcome.

Sequence Diagram

sequenceDiagram
    participant Compiler as Compiler
    participant IR as IR Builder
    participant Runtime as Runtime

    Compiler->>IR: Transform vIf in transition context
    IR->>IR: Increment ifIndex counter
    IR->>IR: Assign index to IfIRNode
    Compiler->>Compiler: Generate createIf call with index
    Note over Compiler: Compile-time indexing complete

    Runtime->>Runtime: createIf(condition, block, fallback, once, index)
    alt Index provided
        Runtime->>Runtime: Create keyed DynamicFragment with key=`${index}:${outcome}`
    else No index
        Runtime->>Runtime: Create unkeyed DynamicFragment
    end
    Runtime->>Runtime: Setup renderEffect with keyed/unkeyed update
    Note over Runtime: Runtime keying enables transitions

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested labels

scope: compiler, scope: transition, :hammer: p3-minor-bug

Poem

🐰 A branching chain, once hard to trace,
Now wears its index with grace,
Keys unlock each twist and turn,
As transitions dance and learn—
Else-if and else, now choreographed fine! 🎭

✨ Finishing touches

📝 Generate docstrings

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

pkg-pr-new · 2026-01-29T07:25:28Z

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14374

npm i https://pkg.pr.new/@vue/compiler-vapor@14374

yarn add https://pkg.pr.new/@vue/compiler-vapor@14374.tgz

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14374

npm i https://pkg.pr.new/@vue/runtime-vapor@14374

yarn add https://pkg.pr.new/@vue/runtime-vapor@14374.tgz

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: 5a95eea

github-actions · 2026-01-29T07:25:32Z

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	86.4 kB	30.2 kB	26.6 kB
runtime-dom.global.prod.js	109 kB	41.4 kB	37.1 kB
vue.global.prod.js	169 kB	61.2 kB	54.5 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.5 kB	19.4 kB	17.7 kB
createApp	58.5 kB	22.7 kB	20.7 kB
createApp + vaporInteropPlugin	80.5 kB	29.9 kB	27.1 kB
createVaporApp	29.3 kB	11.3 kB	10.4 kB
createSSRApp	62.8 kB	24.4 kB	22.2 kB
createVaporSSRApp	32.7 kB	12.6 kB	11.5 kB
defineCustomElement	64.5 kB	24.6 kB	22.3 kB
defineVaporCustomElement	39.6 kB	14.6 kB	13.4 kB
overall	73.3 kB	28 kB	25.4 kB

edison1105 · 2026-01-29T07:37:11Z

@coderabbitai review

coderabbitai · 2026-01-29T07:37:18Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copied from vuejs/core#14374

edison1105 added 2 commits January 29, 2026 15:04

fix(transition): add key for transition if-branches

ec56f21

test(transition): add tests for if/else-if/else chain transitions

5a95eea

edison1105 mentioned this pull request Jan 29, 2026

fix(Transition): fix VaporTransition animation #14368

Closed

edison1105 merged commit e08308e into minor Jan 29, 2026
17 checks passed

edison1105 deleted the edison/fix/transition+ifBranchs branch January 29, 2026 07:38

zhiyuanzmj added a commit to vuejs/vue-jsx-vapor that referenced this pull request Feb 1, 2026

fix(compiler/vapor): add key for transition if-branches

f711dc6

Copied from vuejs/core#14374

coderabbitai bot mentioned this pull request Feb 4, 2026

feat(compiler-vapor): add keyed block handling for dynamic keys #14410

Merged

coderabbitai bot mentioned this pull request Feb 26, 2026

test(vapor-e2e): split transition/transition-group e2e cases into file-based #14482

Merged

coderabbitai bot mentioned this pull request Mar 20, 2026

fix(transition-group): align transition-group dynamic tag updates with vdom #14605

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(transition): add key for transition if-branches#14374

fix(transition): add key for transition if-branches#14374
edison1105 merged 2 commits intominorfrom
edison/fix/transition+ifBranchs

edison1105 commented Jan 29, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 29, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Suggested labels

Poem

Uh oh!

pkg-pr-new bot commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

edison1105 commented Jan 29, 2026

Uh oh!

coderabbitai bot commented Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

edison1105 commented Jan 29, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Suggested labels

Poem

Uh oh!

pkg-pr-new bot commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026

Size Report

Bundles

Usages

Uh oh!

edison1105 commented Jan 29, 2026

Uh oh!

coderabbitai bot commented Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

edison1105 commented Jan 29, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 29, 2026 •

edited

Loading