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

fix #3104

diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index ccb1ae61720460d45a0be8b822c9e15e3490e569..dcc8105bfecee1b8519b26f28d7444aa2c32a273 100644 (file)
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/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', () => {

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 674eb795616807a464ace68c03950c7793299531..a6f2fb27f33d5a7845476a87eddab91e29ef001a 100644 (file)
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/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,