diff --git a/packages/compiler-vapor/__tests__/transforms/TransformTransition.spec.ts b/packages/compiler-vapor/__tests__/transforms/TransformTransition.spec.ts
new file mode 100644
index 000000000..28425e5fd
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/TransformTransition.spec.ts
@@ -0,0 +1,55 @@
+import { makeCompile } from './_utils'
+import {
+  transformChildren,
+  transformElement,
+  transformText,
+  transformVBind,
+  transformVIf,
+  transformVSlot,
+} from '@vue/compiler-vapor'
+import { expect } from 'vitest'
+
+const compileWithElementTransform = makeCompile({
+  nodeTransforms: [
+    transformText,
+    transformVIf,
+    transformElement,
+    transformVSlot,
+    transformChildren,
+  ],
+  directiveTransforms: {
+    bind: transformVBind,
+  },
+})
+
+describe('compiler: transition', () => {
+  test('basic', () => {
+    const { code } = compileWithElementTransform(
+      `<Transition appear><h1 v-show="show">foo</h1></Transition>`,
+    )
+    expect(code).toMatchSnapshot()
+  })
+
+  test('work with v-if', () => {
+    const { code } = compileWithElementTransform(
+      `<Transition><h1 v-if="show">foo</h1></Transition>`,
+    )
+
+    expect(code).toMatchSnapshot()
+    // n2 should have a key
+    expect(code).contains('n2.key = 2')
+  })
+
+  test('work with dynamic keyed children', () => {
+    const { code } = compileWithElementTransform(
+      `<Transition>
+        <h1 :key="key">foo</h1>
+      </Transition>`,
+    )
+
+    expect(code).toMatchSnapshot()
+    expect(code).contains('_createKeyedFragment(() => _ctx.key')
+    // should preserve key
+    expect(code).contains('n0.key = _ctx.key')
+  })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap
new file mode 100644
index 000000000..d515ed7a2
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap
@@ -0,0 +1,53 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: transition > basic 1`] = `
+"import { VaporTransition as _VaporTransition, createComponent as _createComponent, template as _template } from 'vue';
+const t0 = _template("<h1>foo</h1>")
+
+export function render(_ctx) {
+  const n1 = _createComponent(_VaporTransition, { appear: () => ("") }, {
+    "default": () => {
+      const n0 = t0()
+      return n0
+    }
+  }, true)
+  return n1
+}"
+`;
+
+exports[`compiler: transition > work with dynamic keyed children 1`] = `
+"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, createComponent as _createComponent, template as _template } from 'vue';
+const t0 = _template("<h1>foo</h1>")
+
+export function render(_ctx) {
+  const n1 = _createComponent(_VaporTransition, null, {
+    "default": () => {
+      return _createKeyedFragment(() => _ctx.key, () => {
+        const n0 = t0()
+        n0.key = _ctx.key
+        return n0
+      })
+    }
+  }, true)
+  return n1
+}"
+`;
+
+exports[`compiler: transition > work with v-if 1`] = `
+"import { VaporTransition as _VaporTransition, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
+const t0 = _template("<h1>foo</h1>")
+
+export function render(_ctx) {
+  const n3 = _createComponent(_VaporTransition, null, {
+    "default": () => {
+      const n0 = _createIf(() => (_ctx.show), () => {
+        const n2 = t0()
+        n2.key = 2
+        return n2
+      })
+      return n0
+    }
+  }, true)
+  return n3
+}"
+`;