fix(Transition): Make transition behavior in KeepAlive in dev-mode consistent with production-mode.

packages/runtime-core/src/renderer.ts

@@ -1996,7 +1996,17 @@ function baseCreateRenderer(
     moveType,
     parentSuspense = null
   ) => {
-    const { el, type, transition, children, shapeFlag } = vnode
+    const { el, type, transition, children, shapeFlag, patchFlag } = vnode
+
+    if (
+      __DEV__ &&
+      patchFlag > 0 &&
+      patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+    ) {
+      const root = filterSingleRoot(children as VNodeArrayChildren)
+      root && (root.transition = transition)
+    }
+
     if (shapeFlag & ShapeFlags.COMPONENT) {
       move(vnode.component!.subTree, container, anchor, moveType)
       return

packages/vue/__tests__/Transition.spec.ts

@@ -2091,4 +2091,75 @@ describe('e2e: Transition', () => {
     },
     E2E_TIMEOUT
   )
+
+  // #5500
+  test(`Get the correct name of the Transition component in dev mode`, async () => {
+    await page().evaluate(duration => {
+      const { createApp, ref, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode } = (window as any).Vue
+      createApp({
+        template: `
+        <div id="container">
+          <transition :name="view.transitionName" duration="${duration * 2}">
+            <KeepAlive>
+              <component :is="view.name"></component>
+            </KeepAlive>
+          </transition>
+        </div>
+        <button id="changeViewBtn" @click="change">button</button>
+        `,
+        components: {
+          one: {
+            render() {
+              return (openBlock(), createElementBlock(Fragment, null, [
+                createCommentVNode(" Comment! "),
+                createElementVNode("div", { class: "one" }, "one", -1)
+              ], 2112))
+            },
+          },
+          two: {
+            template: '<div class=\"two\">two</div>'
+          }
+        },
+        setup: () => {
+          const view = ref({
+            name: 'one',
+            transitionName: 'slide-left'
+          })
+          const change = () => {
+            view.value = {
+              name: 'two',
+              transitionName: 'slide-right'
+            }
+          }
+          return { view, change }
+        },
+      }).mount('#app')
+    }, duration)
+    expect(await html('#container')).toBe('<!-- Comment! --><div class=\"one\">one</div>')
+
+    await page().evaluate(() => {
+      ;(document.querySelector('#changeViewBtn') as any)!.click()
+    })
+
+    expect(await classList('.one')).toStrictEqual([
+      'one',
+      'slide-right-leave-from',
+      'slide-right-leave-active'
+    ])
+
+    expect(await classList('.two')).toStrictEqual([
+      'two',
+      'slide-right-enter-from',
+      'slide-right-enter-active'
+    ])
+
+    await transitionFinish(duration)
+    expect(await html('#container')).toBe(
+      `<div class="one slide-right-leave-active slide-right-leave-to">one</div>` +
+      `<div class="two slide-right-enter-active slide-right-enter-to">two</div>`
+    )
+
+    await transitionFinish(duration)
+    expect(await html('#container')).toBe(`<div class=\"two\">two</div>`)
+  }, E2E_TIMEOUT)
 })