fix(components): [collapse-transition] collapse get el exists height (#14801)

fix: collapse get el exists height

Signed-off-by: Innei <i@innei.in>

docs/examples/transitions/collapse.vue

@@ -2,9 +2,9 @@
   <div>
     <el-button @click="show = !show">Click Me</el-button>
 
-    <div style="margin-top: 20px; height: 200px">
+    <div style="margin-top: 20px">
       <el-collapse-transition>
-        <div v-show="show">
+        <div v-show="show" style="height: 400px">
           <div class="transition-box">el-collapse-transition</div>
           <div class="transition-box">el-collapse-transition</div>
         </div>

packages/components/collapse-transition/src/collapse-transition.vue

@@ -26,6 +26,7 @@ const on = {
 
     el.dataset.oldPaddingTop = el.style.paddingTop
     el.dataset.oldPaddingBottom = el.style.paddingBottom
+    if (el.style.height) el.dataset.elExistsHeight = el.style.height
 
     el.style.maxHeight = 0
     el.style.paddingTop = 0
@@ -33,15 +34,20 @@ const on = {
   },
 
   enter(el: RendererElement) {
-    el.dataset.oldOverflow = el.style.overflow
-    if (el.scrollHeight !== 0) {
-      el.style.maxHeight = `${el.scrollHeight}px`
-    } else {
-      el.style.maxHeight = 0
-    }
-    el.style.paddingTop = el.dataset.oldPaddingTop
-    el.style.paddingBottom = el.dataset.oldPaddingBottom
-    el.style.overflow = 'hidden'
+    requestAnimationFrame(() => {
+      el.dataset.oldOverflow = el.style.overflow
+      if (el.dataset.elExistsHeight) {
+        el.style.maxHeight = el.dataset.elExistsHeight
+      } else if (el.scrollHeight !== 0) {
+        el.style.maxHeight = `${el.scrollHeight}px`
+      } else {
+        el.style.maxHeight = 0
+      }
+
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+      el.style.overflow = 'hidden'
+    })
   },
 
   afterEnter(el: RendererElement) {