使用固定但足够大的 max-height 值（如 1000px）替代 none，配合精确的 transition 属性，可在纯 css 下实现平滑、响应式的内容展开/收起动画，兼容长文本且无需 javascript 计算高度。
使用固定但足够大的 max-height 值（如 1000px）替代 none，配合精确的 transition 属性，可在纯 css 下实现平滑、响应式的内容展开/收起动画，兼容长文本且无需 javascript 计算高度。
在 CSS 中为可折叠区域添加过渡动画时，一个常见痛点是：max-height: none 无法触发动画，因为 none 是非数值关键字，浏览器无法对其插值；而硬编码一个过小的 max-height（如 150px）又会导致长内容被截断。
解决方案是：使用一个远大于预期内容高度的固定像素值（如 1000px 或 2000px）作为展开态的 max-height。
该值需满足两个条件：
- 足够大，确保所有可能内容都能完整显示；
- 仍为具体数值，使 CSS 过渡能正常执行。
同时，应优化 CSS 声明以提升可靠性：
✅ 推荐写法（关键点）：
- 显式指定 transition: max-height 1s ease（避免 all 引发不必要的重绘）；
- 确保初始状态 max-height 精确匹配折叠高度（如 52px），且 overflow: hidden；
- 展开类 .expand 中仅修改 max-height，不改动 overflow（默认继承 hidden，动画期间自动适应）。
.smalldesc {
max-height: 52px;
overflow: hidden;
transition: max-height 1s ease; /* 关键：只过渡 max-height */
border: 1px solid red;
}
.smalldesc.expand {
max-height: 1000px; /* ✅ 足够大，覆盖绝大多数场景 */
}JavaScript 仅负责切换类名，轻量且解耦：
立即学习“前端免费学习笔记（深入）”；
document.querySelector('a').addEventListener('click', function() {
document.querySelector('.smalldesc').classList.toggle('expand');
});⚠️ 注意事项：
- 避免 max-height: 0 → none 的组合：即使 0 可动画，none 仍会中断过渡；
- 慎用过大的值（如 9999px）：虽可行，但可能轻微影响渲染性能或导致滚动异常；1000px 对多数正文段落已绰绰有余；
- 响应式场景建议：若容器宽度变化显著（如移动端），可配合媒体查询微调 max-height，或改用 clamp() 配合视口单位（如 max-height: clamp(52px, 80vh, 1000px)）增强鲁棒性；
- 无障碍提示：建议为触发按钮添加 aria-expanded 属性，并同步更新其值，提升可访问性。
此方案零依赖 JS 高度计算，无运行时开销，兼容所有现代浏览器，是兼顾简洁性、性能与可靠性的最佳实践。
