max-height过渡失效主因是auto不可插值，须用JS测高后设具体像素值过渡；展开需visibility隐藏测量再切换，收起后补overflow:hidden；时长宜0.2–0.35s并配ease-in-out，还需处理动画中断与无障碍状态同步。
max-height过渡失效的常见原因
直接给 max-height 加 transition 通常没反应，不是 CSS 写错了，而是浏览器无法对 max-height: 0 → max-height: auto 做插值动画——auto 不是可计算数值，过渡会立刻跳变。
- 别写
max-height: auto在过渡终点，它会让 transition 彻底失效 - 用具体像素值代替
auto，比如预估最大高度设为max-height: 300px - 初始状态用
max-height: 0+overflow: hidden，但要确保元素内边距、行高、字体大小不干扰实际展开高度 - 如果内容高度动态变化（比如响应式文字或用户输入），硬写死
max-height容易截断或留白过多
用 JS 动态获取真实高度再过渡
想真正“贴合内容”做平滑展开，必须先让元素临时可见、测量、再过渡。关键不在 CSS，而在 JS 控制时机和样式切换节奏。
- 触发展开前，先将元素设为
visibility: hidden+height: auto+max-height: none，但保持overflow: visible - 用
offsetHeight或getBoundingClientRect().height读取真实高度 - 立即切回
visibility: hidden，设置max-height为目标值，再加transition，最后移除visibility: hidden - 收起时可以直接设
max-height: 0，但记得等 transition 结束后补上overflow: hidden，否则可能闪出滚动条
transition-duration 和 easing 的实际影响
过渡时间太短（如 0.1s）看起来像没动；太长（如 0.6s）又拖沓。缓动函数选错也会破坏体验。
-
transition-timing-function: ease-in-out比ease更适合折叠/展开，开头结尾更柔和 - 展开建议用
0.25s ~ 0.35s，收起略快一点（0.2s），人眼会觉得“响应更及时” - 避免在
max-height上叠加其他过渡属性（比如opacity），不同属性帧率不一致容易卡顿 - 移动端要注意
will-change: max-height可能引发渲染异常，实测多数场景不需要加
兼容性与无障碍注意事项
这个技巧在现代浏览器基本没问题，但两个细节常被忽略：动画中断时的状态残留，以及屏幕阅读器感知。
- 用户快速连续点击展开/收起，JS 中没清除正在运行的
transitionend监听，会导致max-height卡在中间值 - 用
aria-expanded="true/false"同步更新按钮状态，否则 VoiceOver 或 NVDA 不知道内容是否已展开 - 别依赖纯 CSS 实现“展开更多”，没有 JS 测量就做不到真正自适应；CSS-only 方案只能用于高度固定的内容块
- 如果内容含图片或异步加载文本，测量高度前得等
img.onload或requestAnimationFrame确保布局稳定
实际做下来，最难的不是写那几行 CSS，而是判断什么时候该用 JS 测量、什么时候可以偷懒写死高度，以及怎么让多次点击不乱套。这些边界情况，往往只在用户猛点两下时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
