diff --git a/docs/examples/transitions/collapse.vue b/docs/examples/transitions/collapse.vue index 0ffaac61ae..7d86c1f7d2 100644 --- a/docs/examples/transitions/collapse.vue +++ b/docs/examples/transitions/collapse.vue @@ -2,9 +2,9 @@
Click Me -
+
-
+
el-collapse-transition
el-collapse-transition
diff --git a/packages/components/collapse-transition/src/collapse-transition.vue b/packages/components/collapse-transition/src/collapse-transition.vue index 0a5455b88d..12c65dbe6e 100644 --- a/packages/components/collapse-transition/src/collapse-transition.vue +++ b/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) {