使用固定但足够大的 max-height 值（如 1000px）替代 none，配合精确的 transition 属性，可实现平滑、兼容性强的展开/折叠动效，完美适配任意长度内容。
使用固定但足够大的 `max-height` 值（如 1000px）替代 `none`，配合精确的 `transition` 属性，可实现平滑、兼容性强的展开/折叠动效，完美适配任意长度内容。
在 CSS 中为元素添加高度过渡动画时，max-height: none 无法触发 transition，因为 none 是非数值关键字，浏览器无法计算中间状态。一个被广泛验证且实用的解决方案是：用一个远超内容实际高度的固定像素值（如 1000px 或 2000px）代替 none。该值需大于页面中该元素可能出现的最大高度，同时避免过大影响性能（通常 1000px 对绝大多数文本容器已足够）。
关键优化点如下：
- ✅ 仅过渡 max-height：将 transition: all 1s ease 改为 transition: max-height 1s ease，提升性能并避免意外属性动画；
- ✅ 移除冗余声明：overflow: hidden 只需声明一次；
- ✅ 确保初始状态可控：.smalldesc 设置明确的 max-height: 52px 和 overflow: hidden，保证默认收起；
- ✅ JavaScript 控制简洁可靠：使用 classList.toggle() 切换类名，语义清晰、无副作用。
以下是完整可运行示例：
<a href="#" id="toggleBtn">Read More</a> <div class="smalldesc"> <p>（此处为长文本，可任意扩展……）</p> </div>
.smalldesc {
max-height: 52px;
overflow: hidden;
transition: max-height 1s ease-in-out;
border: 1px solid #e00;
line-height: 1.6;
}
.smalldesc.expand {
max-height: 1000px; /* 足够容纳绝大多数动态内容 */
}
document.getElementById('toggleBtn').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.smalldesc').classList.toggle('expand');
});
⚠️ 注意事项：
- 不建议使用 max-height: 9999px 等极端值——虽可行，但可能在部分旧版浏览器中引发渲染延迟或布局抖动；
- 若内容高度差异极大（如含图片、iframe 等异步加载元素），建议在展开后通过 getBoundingClientRect() 或 offsetHeight 动态计算真实高度，并内联设置 max-height，实现真正精准过渡（进阶用法）；
- 所有过渡依赖 max-height 的数值变化，因此请确保初始和展开状态均为具体像素值（px、em 等可计算单位），避免 auto、fit-content 或 none。
此方案兼顾兼容性（支持所有现代浏览器及 IE10+）、性能与开发体验，是生产环境中实现“无限高度”过渡动画的稳健选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
