fix(Transition): should queue update when leave finishes

packages/runtime-core/src/components/BaseTransition.ts

@@ -18,6 +18,7 @@ import { toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
 import { PatchFlags, ShapeFlags, isArray, isFunction } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
+import { queueJob } from '../scheduler'
 import type { RendererElement } from '../renderer'
 
 type Hook<T = () => void> = T | T[]
@@ -233,7 +234,7 @@ const BaseTransitionImpl: ComponentOptions = {
             // it also needs to be updated when active is undefined
             if (instance.update.active !== false) {
               instance.effect.dirty = true
-              instance.update()
+              queueJob(instance.update)
             }
           }
           return emptyPlaceholder(child)

packages/vue/__tests__/e2e/Transition.spec.ts

@@ -1216,6 +1216,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(