From dc8a4775437ed99fe832332f07ce31a357da014d Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Feb 2023 13:33:17 +0800
Subject: [PATCH 1/2] chore: rebase

---
 .../src/components/BaseTransition.ts          |  3 +-
 packages/vue/__tests__/e2e/Transition.spec.ts | 83 +++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 043b9736525..69d8165d8ff 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -19,6 +19,7 @@ import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
 import { ShapeFlags, PatchFlags, isArray } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
 import { RendererElement } from '../renderer'
+import { queueJob } from '../scheduler'
 
 type Hook<T = () => void> = T | T[]
 
@@ -243,7 +244,7 @@ const BaseTransitionImpl: ComponentOptions = {
             // #6835
             // it also needs to be updated when active is undefined
             if (instance.update.active !== false) {
-              instance.update()
+              queueJob(instance.update)
             }
           }
           return emptyPlaceholder(child)
diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
index f283d82608c..8342f210c64 100644
--- a/packages/vue/__tests__/e2e/Transition.spec.ts
+++ b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1217,6 +1217,89 @@ describe('e2e: Transition', () => {
     )
   })
 
+  //#4933
+  test(
+    '(out-in mode) transition on child components with empty root node',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, ref, computed } = (window as any).Vue
+        createApp({
+          template: `
+              <div id="container">
+                <transition name="test" mode="out-in">
+                  <component class="test" :is="view" :key="key"></component>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="change">button</button>
+            `,
+          components: {
+            one: {
+              template: '<div v-if="false">one</div>'
+            },
+            two: {
+              template: '<div v-if="true">two</div>'
+            }
+          },
+          setup: () => {
+            const toggle = ref(true)
+            const view = ref('two')
+            const key = computed(() => (view.value === 'one' ? 'one' : 'two'))
+            const change = () =>
+              (view.value = view.value === 'one' ? 'two' : 'one')
+            return { toggle, change, view, key }
+          }
+        }).mount('#app')
+      })
+      expect(await html('#container')).toBe('<div class="test">two</div>')
+
+      // two -> one
+      expect(await classWhenTransitionStart()).toStrictEqual([
+        'test',
+        'test-leave-from',
+        'test-leave-active'
+      ])
+      await nextFrame()
+      expect(await classList('.test')).toStrictEqual([
+        'test',
+        'test-leave-active',
+        'test-leave-to'
+      ])
+      await transitionFinish()
+      expect(await html('#container')).toBe('<!--v-if-->')
+
+      // one -> two
+      expect(await classWhenTransitionStart()).toStrictEqual([
+        'test',
+        'test-enter-from',
+        'test-enter-active'
+      ])
+      await nextFrame()
+      expect(await classList('.test')).toStrictEqual([
+        'test',
+        'test-enter-active',
+        'test-enter-to'
+      ])
+      await transitionFinish()
+      expect(await html('#container')).toBe('<div class="test">two</div>')
+
+      // two -> one again
+      expect(await classWhenTransitionStart()).toStrictEqual([
+        'test',
+        'test-leave-from',
+        'test-leave-active'
+      ])
+      await nextFrame()
+      expect(await classList('.test')).toStrictEqual([
+        'test',
+        'test-leave-active',
+        'test-leave-to'
+      ])
+      await transitionFinish()
+      expect(await html('#container')).toBe('<!--v-if-->')
+    },
+    E2E_TIMEOUT
+  )
+
   describe('transition with Suspense', () => {
     // #1583
     test(

From afbacd1186106a013ad40222e7de0bb6bf49c3dc Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 1 Feb 2024 09:13:40 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 packages/vue/__tests__/e2e/Transition.spec.ts | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
index a2e39b0ee8d..67a487a97b6 100644
--- a/packages/vue/__tests__/e2e/Transition.spec.ts
+++ b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1233,11 +1233,11 @@ describe('e2e: Transition', () => {
             `,
           components: {
             one: {
-              template: '<div v-if="false">one</div>'
+              template: '<div v-if="false">one</div>',
             },
             two: {
-              template: '<div v-if="true">two</div>'
-            }
+              template: '<div v-if="true">two</div>',
+            },
           },
           setup: () => {
             const toggle = ref(true)
@@ -1246,7 +1246,7 @@ describe('e2e: Transition', () => {
             const change = () =>
               (view.value = view.value === 'one' ? 'two' : 'one')
             return { toggle, change, view, key }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe('<div class="test">two</div>')
@@ -1255,13 +1255,13 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-leave-from',
-        'test-leave-active'
+        'test-leave-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-leave-active',
-        'test-leave-to'
+        'test-leave-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -1270,13 +1270,13 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-enter-from',
-        'test-enter-active'
+        'test-enter-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-enter-active',
-        'test-enter-to'
+        'test-enter-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<div class="test">two</div>')
@@ -1285,18 +1285,18 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-leave-from',
-        'test-leave-active'
+        'test-leave-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-leave-active',
-        'test-leave-to'
+        'test-leave-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<!--v-if-->')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   describe('transition with Suspense', () => {