max-height过渡动画失效的根本原因是CSS仅对具体像素值插值，auto和none不可计算；必须用scrollHeight动态获取真实高度，并通过强制重排（offsetHeight）触发平滑过渡。
max-height 过渡动画本身不可靠，直接设 max-height: 0 → max-height: none 会跳变——因为 none 不是可插值数值，浏览器无法计算中间帧。
为什么 max-height 动画常失效
根本限制在于：CSS 只对具体数值（如 120px）做插值过渡，auto 和 none 都被当作“非数值”跳过动画。常见错误写法包括：
-
max-height: 0; transition: max-height 0.3s;→ 展开时设max-height: none，动画不触发，直接显示全量内容 - 硬编码一个固定值（如
max-height: 300px）→ 实际内容高度浮动时，动画要么提前截断、要么留白明显 - 用
offsetHeight或clientHeight读取目标高度 → 它们不含溢出部分，无法反映真实滚动高度
必须用 scrollHeight 动态设目标值
真正能撑满内容的只有一种高度：element.scrollHeight。它包含所有内容（含溢出），且是精确像素值。但不能直接赋值后立刻开动画——浏览器会合并重排，跳过过渡。
- 收起时：先用
getComputedStyle(element).maxHeight读取当前实际高度 → 设为max-height→ 再设max-height: 0 - 展开时：先设
max-height: 0+overflow: hidden→ 立即调用element.offsetHeight强制重排 → 再设max-height: element.scrollHeight - 务必在设新
max-height前加overflow: hidden，否则收起时可能闪现滚动条
纯 CSS 方案只适用于静态行数场景
如果确定最多显示 n 行（如 3 行），可用 -webkit-line-clamp + 类切换，性能好、无 JS：
立即学习“前端免费学习笔记（深入）”；
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
transition: all 0.4s ease;
}
.text.expanded {
-webkit-line-clamp: unset;
display: block;
}- 优势：零 JS、渲染快、无障碍友好（按钮可 focus）
- 缺点：IE 完全不支持；
line-height必须固定，否则行高计算不准；无法动态响应字体缩放或窗口 resize - 按钮定位到右下角需配合
::before伪元素 +float+flex包裹容器，否则calc(100% - Xpx)在无显式高度的父容器中无效
最易被忽略的一点：无论用 JS 动态方案还是纯 CSS 方案，都要检查文本是否真溢出了再渲染按钮——否则短文本旁也会出现“展开”按钮，体验断裂。判断依据只能是 scrollHeight > clientHeight，而不是字数或行数估算。
