feat(transition): support transition to teleport component child

vuejs · Sep 18, 2024 · 000c04f · 000c04f
1 parent 9a36f2a
commit 000c04f
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 5 deletions.
diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
@@ -27,7 +27,7 @@ import {
   warnDeprecation,
 } from './compat/compatConfig'
 import { shallowReadonly } from '@vue/reactivity'
-import { setTransitionHooks } from './components/BaseTransition'
+import { getInnerChild, setTransitionHooks } from './components/BaseTransition'
 
 /**
  * dev only flag to track whether $attrs was used during render.
@@ -248,13 +248,14 @@ export function renderComponentRoot(
   }
   // inherit transition data
   if (vnode.transition) {
-    if (__DEV__ && !isElementRoot(root)) {
+    const child = getInnerChild(root) ?? root
+    if (__DEV__ && !isElementRoot(child)) {
       warn(
         `Component inside <Transition> renders non-element root node ` +
           `that cannot be animated.`,
       )
     }
-    setTransitionHooks(root, vnode.transition)
+    setTransitionHooks(child, vnode.transition)
   }
 
   if (__DEV__ && setRoot) {

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
@@ -484,7 +484,7 @@ function emptyPlaceholder(vnode: VNode): VNode | undefined {
   }
 }
 
-function getInnerChild(vnode: VNode): VNode | undefined {
+export function getInnerChild(vnode: VNode): VNode | undefined {
   if (!isKeepAlive(vnode)) {
     if (isTeleport(vnode.type) && vnode.children) {
       return findNonCommentChild(vnode.children as VNode[])

diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1,6 +1,6 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import path from 'node:path'
-import { Transition, createApp, h, nextTick, ref } from 'vue'
+import { Teleport, Transition, createApp, h, nextTick, ref } from 'vue'
 
 describe('e2e: Transition', () => {
   const { page, html, classList, isVisible, timeout, nextFrame, click } =
@@ -2310,6 +2310,89 @@ describe('e2e: Transition', () => {
         )
       },
       E2E_TIMEOUT,
+    ),
+    test(
+      'apply transition to teleport component child',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref, h } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="target"></div>
+            <div id="container">
+              <transition>
+                  <Comp v-if="toggle" >content</Comp>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              Comp: {
+                setup() {
+                  return () => h(Teleport, { to: '#target' }, [h('div', { class: 'test' }, 'content')])
+                },
+              },
+            },
+            setup: () => {
+              const toggle = ref(false)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            },
+          }).mount('#app')
+        })
+
+        expect(await html('#target')).toBe('')
+        expect(await html('#container')).toBe(
+          '<!--v-if-->',
+        )
+
+        const classWhenTransitionStart = () =>
+          page().evaluate(() => {
+            ;(document.querySelector('#toggleBtn') as any)!.click()
+            return Promise.resolve().then(() => {
+              // find the class of teleported node
+              return document
+                .querySelector('#target div')!
+                .className.split(/\s+/g)
+            })
+          })
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'v-enter-from',
+          'v-enter-active',
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'v-enter-active',
+          'v-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html('#target')).toBe(
+          '<div class="test">content</div>',
+        )
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'v-leave-from',
+          'v-leave-active',
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'v-leave-active',
+          'v-leave-to',
+        ])
+        await transitionFinish()
+        expect(await html('#target')).toBe('')
+        expect(await html('#container')).toBe(
+          '<!--v-if-->',
+        )
+      },
+      E2E_TIMEOUT,
     )
   })