获取被overflow:hidden裁剪的DOM元素真实高度实现平滑过渡

要获取被overflow:hidden隐藏的组件内容真实高度（即不限制高度时h1和p标签呈现的总高度），可以利用DOM元素的scrollHeight属性，它会返回元素包含所有内容的完整高度（包括被裁剪的部分）。

以下是适配Vue 3 Composition API & <script setup>的实现方案：

<script setup>
import { reactive, ref } from 'vue'

const state = reactive({
    meetCardHeight: 100
})

const element = ref(null)

const changeElementHeight = () => {
    if (state.meetCardHeight !== element.value.scrollHeight) {
        state.meetCardHeight = element.value.scrollHeight
    } else {
        state.meetCardHeight = 100
    }
}
</script>

<template>
  <div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" @click="changeElementHeight">

    <h1>Hello World</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>

  </div>
</template>

方案说明 #

• 通过ref绑定容器元素，方便后续获取DOM实例
• scrollHeight属性自动计算容器内所有内容的真实高度，包含被overflow:hidden隐藏的部分
• 点击容器可切换高度状态：从固定100px切换到内容真实高度，配合Tailwind的过渡类实现平滑动画效果

内容的提问来源于stack exchange，提问作者Artur Müller Romanov