diff --git a/packages/components/collapse-transition/src/collapse-transition.vue b/packages/components/collapse-transition/src/collapse-transition.vue
index 96da3f5396..131273c778 100644
--- a/packages/components/collapse-transition/src/collapse-transition.vue
+++ b/packages/components/collapse-transition/src/collapse-transition.vue
@@ -3,75 +3,70 @@
     <slot />
   </transition>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { useNamespace } from '@element-plus/hooks'
 
-export default defineComponent({
+defineOptions({
   name: 'ElCollapseTransition',
-  setup() {
-    const ns = useNamespace('collapse-transition')
+})
 
-    return {
-      ns,
-      on: {
-        beforeEnter(el) {
-          if (!el.dataset) el.dataset = {}
+const ns = useNamespace('collapse-transition')
 
-          el.dataset.oldPaddingTop = el.style.paddingTop
-          el.dataset.oldPaddingBottom = el.style.paddingBottom
+const on = {
+  beforeEnter(el) {
+    if (!el.dataset) el.dataset = {}
 
-          el.style.maxHeight = 0
-          el.style.paddingTop = 0
-          el.style.paddingBottom = 0
-        },
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
 
-        enter(el) {
-          el.dataset.oldOverflow = el.style.overflow
-          if (el.scrollHeight !== 0) {
-            el.style.maxHeight = `${el.scrollHeight}px`
-            el.style.paddingTop = el.dataset.oldPaddingTop
-            el.style.paddingBottom = el.dataset.oldPaddingBottom
-          } else {
-            el.style.maxHeight = 0
-            el.style.paddingTop = el.dataset.oldPaddingTop
-            el.style.paddingBottom = el.dataset.oldPaddingBottom
-          }
+    el.style.maxHeight = 0
+    el.style.paddingTop = 0
+    el.style.paddingBottom = 0
+  },
 
-          el.style.overflow = 'hidden'
-        },
+  enter(el) {
+    el.dataset.oldOverflow = el.style.overflow
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = `${el.scrollHeight}px`
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    } else {
+      el.style.maxHeight = 0
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    }
 
-        afterEnter(el) {
-          el.style.maxHeight = ''
-          el.style.overflow = el.dataset.oldOverflow
-        },
+    el.style.overflow = 'hidden'
+  },
 
-        beforeLeave(el) {
-          if (!el.dataset) el.dataset = {}
-          el.dataset.oldPaddingTop = el.style.paddingTop
-          el.dataset.oldPaddingBottom = el.style.paddingBottom
-          el.dataset.oldOverflow = el.style.overflow
+  afterEnter(el) {
+    el.style.maxHeight = ''
+    el.style.overflow = el.dataset.oldOverflow
+  },
 
-          el.style.maxHeight = `${el.scrollHeight}px`
-          el.style.overflow = 'hidden'
-        },
+  beforeLeave(el) {
+    if (!el.dataset) el.dataset = {}
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.oldOverflow = el.style.overflow
 
-        leave(el) {
-          if (el.scrollHeight !== 0) {
-            el.style.maxHeight = 0
-            el.style.paddingTop = 0
-            el.style.paddingBottom = 0
-          }
-        },
+    el.style.maxHeight = `${el.scrollHeight}px`
+    el.style.overflow = 'hidden'
+  },
 
-        afterLeave(el) {
-          el.style.maxHeight = ''
-          el.style.overflow = el.dataset.oldOverflow
-          el.style.paddingTop = el.dataset.oldPaddingTop
-          el.style.paddingBottom = el.dataset.oldPaddingBottom
-        },
-      },
+  leave(el) {
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = 0
+      el.style.paddingTop = 0
+      el.style.paddingBottom = 0
     }
   },
-})
+
+  afterLeave(el) {
+    el.style.maxHeight = ''
+    el.style.overflow = el.dataset.oldOverflow
+    el.style.paddingTop = el.dataset.oldPaddingTop
+    el.style.paddingBottom = el.dataset.oldPaddingBottom
+  },
+}
 </script>