fix(transition): toggling branches with in-out mode should be transitioned correctly (#3109)

fix #3104

packages/runtime-core/__tests__/components/BaseTransition.spec.ts

@@ -247,14 +247,17 @@ describe('BaseTransition', () => {
   })
 
   describe('toggle on-off', () => {
-    async function testToggleOnOff({
-      trueBranch,
-      trueSerialized,
-      falseBranch,
-      falseSerialized
-    }: ToggleOptions) {
+    async function testToggleOnOff(
+      {
+        trueBranch,
+        trueSerialized,
+        falseBranch,
+        falseSerialized
+      }: ToggleOptions,
+      mode?: BaseTransitionProps['mode']
+    ) {
       const toggle = ref(true)
-      const { props, cbs } = mockProps()
+      const { props, cbs } = mockProps({ mode })
       const root = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch())
@@ -322,6 +325,18 @@ describe('BaseTransition', () => {
         falseSerialized: `<!---->`
       })
     })
+
+    test('w/ mode: "in-out', async () => {
+      await testToggleOnOff(
+        {
+          trueBranch: () => h('div'),
+          trueSerialized: `<div></div>`,
+          falseBranch: () => null,
+          falseSerialized: `<!---->`
+        },
+        'in-out'
+      )
+    })
   })
 
   describe('toggle on-off before finish', () => {

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

@@ -223,7 +223,7 @@ const BaseTransitionImpl = {
             instance.update()
           }
           return emptyPlaceholder(child)
-        } else if (mode === 'in-out') {
+        } else if (mode === 'in-out' && innerChild.type !== Comment) {
           leavingHooks.delayLeave = (
             el: TransitionElement,
             earlyRemove,