fix(runtime-vapor): TransitionGroup with v-for + v-if not applying transition hooks (#14590)

jackma9604 · web-flow · commit 191678557e33 · 2026-03-16T17:15:33.000+08:00
diff --git a/packages-private/vapor-e2e-test/__tests__/transition-group.spec.ts b/packages-private/vapor-e2e-test/__tests__/transition-group.spec.ts
@@ -146,6 +146,59 @@ describe('vapor transition-group', () => {
     E2E_TIMEOUT,
   )
 
+  test(
+    'for + if enter',
+    async () => {
+      const btnSelector = '.for-if-enter > button.toggle'
+      const addBtnSelector = '.for-if-enter > button.add'
+      const containerSelector = '.for-if-enter > div'
+      expect(await html(containerSelector)).toBe(`<ul></ul>`)
+
+      expect(
+        (await transitionStart(btnSelector, containerSelector)).innerHTML,
+      ).toBe(
+        `<ul>` +
+          `<li class="test v-enter-from v-enter-active">0</li>` +
+          `<li class="test v-enter-from v-enter-active">1</li>` +
+          `</ul>`,
+      )
+
+      await waitForInnerHTML(
+        containerSelector,
+        `<ul>` +
+          `<li class="test v-enter-active v-enter-to">0</li>` +
+          `<li class="test v-enter-active v-enter-to">1</li>` +
+          `</ul>`,
+      )
+
+      await waitForInnerHTML(
+        containerSelector,
+        `<ul><li class="test">0</li><li class="test">1</li></ul>`,
+      )
+
+      // add a new item
+      expect(
+        (await transitionStart(addBtnSelector, containerSelector)).innerHTML,
+      ).toBe(
+        `<ul>` +
+          `<li class="test">0</li>` +
+          `<li class="test">1</li>` +
+          `<li class="test v-enter-from v-enter-active">2</li>` +
+          `</ul>`,
+      )
+
+      await waitForInnerHTML(
+        containerSelector,
+        `<ul>` +
+          `<li class="test">0</li>` +
+          `<li class="test">1</li>` +
+          `<li class="test">2</li>` +
+          `</ul>`,
+      )
+    },
+    E2E_TIMEOUT,
+  )
+
   test(
     'leave',
     async () => {
diff --git a/packages-private/vapor-e2e-test/transition-group/cases/vapor-transition-group/for-if-enter.vue b/packages-private/vapor-e2e-test/transition-group/cases/vapor-transition-group/for-if-enter.vue
@@ -0,0 +1,22 @@
+<script setup vapor>
+import { ref } from 'vue'
+
+const show = ref(false)
+const list = ref([0, 1])
+</script>
+
+<template>
+  <div class="for-if-enter">
+    <button class="toggle" @click="show = !show">toggle button</button>
+    <button class="add" @click="list.push(list.length)">add button</button>
+    <div>
+      <transition-group tag="ul">
+        <template v-for="value in list">
+          <li v-if="show" :key="value" class="test">
+            {{ value }}
+          </li>
+        </template>
+      </transition-group>
+    </div>
+  </div>
+</template>
diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts
@@ -360,7 +360,7 @@ export function setTransitionHooksOnFragment(
 ): void {
   if (isFragment(block)) {
     block.$transition = hooks
-    if (block.nodes && isFragment(block.nodes)) {
+    if (block.nodes && (isFragment(block.nodes) || isArray(block.nodes))) {
       setTransitionHooksOnFragment(block.nodes, hooks)
     }
   } else if (isArray(block)) {

Original file line number	Diff line number	Diff line change
`@@ -360,7 +360,7 @@ export function setTransitionHooksOnFragment(`
`360`	`360`	`): void {`
`361`	`361`	`if (isFragment(block)) {`
`362`	`362`	`block.$transition = hooks`
`363`		`- if (block.nodes && isFragment(block.nodes)) {`
	`363`	`+ if (block.nodes && (isFragment(block.nodes) \|\| isArray(block.nodes))) {`
`364`	`364`	`setTransitionHooksOnFragment(block.nodes, hooks)`
`365`	`365`	`}`
`366`	`366`	`} else if (isArray(block)) {`