fix(transition-group): handle v-if dynamic slots

[jackma9604]

Problem Description

In TransitionGroup, the v-if directive in dynamic slots cannot be processed correctly

Vue Version

3.6.0-beta.8

Link to minimal reproduction
Playground

Summary by CodeRabbit

• Bug Fixes

  • Fixed transition group behavior to correctly handle animations when slots are conditionally shown using v-if, ensuring proper tracking of both container element changes and slot content updates.

• Tests

  • Added end-to-end test coverage for transition groups with dynamically-rendered, conditionally-displayed slots, validating correct animation behavior and transition states when items are added and slots are toggled.

[coderabbitai]

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'fix(transition-group): handle v-if dynamic slots' accurately reflects the main change: fixing TransitionGroup to properly handle v-if directives in dynamic slots.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: c80bb82

[github-actions]

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	111 kB	41.9 kB	37.5 kB
vue.global.prod.js	170 kB	61.7 kB	55 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	50.6 kB	19.8 kB	18 kB
createApp	59.6 kB	23.1 kB	21 kB
createApp + vaporInteropPlugin	85.9 kB	31.8 kB	28.7 kB
createVaporApp	28.8 kB	11.2 kB	10.2 kB
createSSRApp	63.9 kB	24.8 kB	22.5 kB
createVaporSSRApp	32.1 kB	12.4 kB	11.4 kB
defineCustomElement	66.2 kB	25.1 kB	22.8 kB
defineVaporCustomElement	39.5 kB	14.6 kB	13.4 kB
overall	74.5 kB	28.4 kB	25.8 kB

[edison1105]

@jackma9604
Nested renderEffect causes default slot to be called twice when the tag changes. I have fixed it, see e8f4462

[jackma9604]

@jackma9604 Nested renderEffect causes default slot to be called twice when the tag changes. I have fixed it, see e8f4462

Okay, I have learned