TailwindCSS配置height过渡无动画仅显隐如何解决

核心问题原因 #

• 代码中使用了hidden类，对应样式为display: none，该属性无法触发CSS过渡效果，浏览器会直接跳过动画帧完成显隐切换，不会执行高度补间计算。
• h-full为依赖父元素高度的相对值，若父元素无明确固定高度，浏览器无法计算高度过渡的中间状态值，会直接跳转到最终状态。
• 未配置溢出隐藏属性，高度从0开始变化时内部内容会直接溢出容器，视觉上无法呈现高度跟随动画展开的效果。

可直接复用的实现代码 #

方案1：固定高度场景（无需额外配置） #

去掉hidden类，新增overflow-hidden控制内容溢出，为高度设置明确可计算的定值，替换无明确计算依据的h-full：

<div 
  id="fadeInElement" 
  className={`w-2/3 px-5 transition-height duration-500 ease-in-out overflow-hidden ${visible ? "h-48" : "h-0"}`}
>
  McClintock, a Latin professor at Hampden-Sydney College in.....
</div>

注：如果必须使用h-full，请确保该元素的父级元素设置了明确的固定高度值，否则浏览器无法计算过渡过程的中间高度。

方案2：自适应内容高度场景（适配最新版Tailwind，无第三方依赖） #

不需要手动计算内容高度，也不需要额外安装依赖，利用CSS Grid原生支持的轨道尺寸过渡特性实现平滑展开收起，是目前适配最新版Tailwind最稳定的方案：

<div 
  id="fadeInElement" 
  className={`w-2/3 px-5 grid transition-all duration-500 ease-in-out ${visible ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}
>
  <div className="overflow-hidden">
    McClintock, a Latin professor at Hampden-Sydney College in.....
  </div>
</div>

配置检查项 #

如果使用transition-height类无效果，请确认tailwind.config.js中已正确添加高度过渡的属性配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        height: "height",
      },
    },
  },
};

内容的提问来源于stack exchange，提问作者CleverOscar