根本原因是浏览器无法对max-height的auto值做插值动画，需用足够大的固定值（如max-h-[500px]）替代max-h-full或预设类，并始终保留overflow-hidden；JS控制时须确保DOM已渲染、避免toggle hidden、必要时用ResizeObserver适配高度变化。
为什么max-height动画总是一卡一跳？
根本原因不是 Tailwind 写错了，而是浏览器对 max-height 的插值只能在两个确定数值之间进行。写 max-h-0 → max-h-96 看似合理，但 max-h-96 ≈ 384px，一旦内容实际高度超过这个值（比如长段落+响应式换行），动画就会中途截断；反之若内容很短，又会拖着空白收回去。
更隐蔽的问题是：max-h-0 下子元素若有 padding 或 border，视觉上仍可能“露头”，破坏收起感。
- 别用
max-h-full：它不可动画，且触发重排 - 避免
height: 0→height: auto：auto 不参与 transition，直接跳变 -
overflow-hidden必须始终存在——不能只在折叠态加，否则动画中内容会溢出遮挡其他元素
怎么写才真正适配动态内容高度？
核心是用「足够大但安全」的固定值兜底，配合显式过渡声明。Tailwind 中推荐这样组合：
- 初始态：
max-h-0 overflow-hidden transition-all duration-300 ease-in-out - 展开态：
max-h-[500px]（注意中括号语法，绕过预设类限制） - 必须同时保留
overflow-hidden，哪怕在展开态也加——它不干扰显示，只防动画溢出
500px 是经过验证的安全值：覆盖多数 FAQ、导航菜单、富文本段落，又不会因过大导致动画失真或滚动条闪动。移动端可降为 max-h-[400px]。
立即学习“前端免费学习笔记（深入）”；
JS 控制类切换时最容易漏哪几步？
JavaScript 只负责切 class，但逻辑错位会让动画完全失效。常见漏点：
- 用
classList.toggle('hidden')替代max-height切换：hidden是display: none，完全不可动画 - 展开前没确保容器已渲染：比如在
useEffect或DOMContentLoaded后再加展开类，否则第一次动画可能跳帧 - 没处理 resize 场景：窗口缩放后内容高度变，原
max-h-[500px]可能又不够——常规导航菜单可忽略；若内容大幅变动（如富文本折叠），需结合ResizeObserver动态重设目标值
transition-all 真的比 transition-max-height 更稳吗？
是务实选择，但不是无代价。它会过渡 box-shadow、filter 等属性，若元素带这些样式，可能卡顿或意外抖动。
如果只改 max-height 和 opacity，建议显式写 transition-max-height transition-opacity duration-300；但折叠面板这类涉及布局变化的场景，transition-all 反而更省心——因为内部 padding、margin 的隐式变化也会被覆盖，避免视觉跳动。
真正容易被忽略的是：过渡是否生效，和类名顺序无关，而和 DOM 节点是否真实完成渲染强相关。JS 动态插入元素后，如果没等节点挂载完成就立刻加展开类，动画大概率会失效。
