使用 max-height 模拟“无限高度”过渡动画，避免 max-height: none 导致 CSS 过渡失效，通过设置足够大的固定值（如 1000px）并精确控制 transition 属性，实现平滑、兼容性良好的展开收起效果。
使用 `max-height` 模拟“无限高度”过渡动画，避免 `max-height: none` 导致 css 过渡失效，通过设置足够大的固定值（如 1000px）并精确控制 `transition` 属性，实现平滑、兼容性良好的展开收起效果。
在 CSS 中为元素添加展开/折叠动效时，一个常见痛点是：max-height: none 无法参与 CSS transition，导致直接跳变、失去动画效果。这是因为 none 是非数值关键字，浏览器无法计算中间状态；而 auto 同样不可动画化。因此，需采用「足够大但确定的数值」替代“无限”，配合精准的 transition 设置，达成视觉上无缝、响应式的高度过渡。
✅ 推荐方案：用超大 max-height 值模拟“无限”
核心思路是将 .expand 状态的 max-height 设为远超内容实际高度的固定值（如 1000px 或 200vh），确保所有可能内容都能完整显示，同时保持可动画性：
.smalldesc {
max-height: 52px; /* 折叠时的最大可见高度 */
overflow: hidden;
transition: max-height 1s ease; /* 关键：只过渡 max-height，避免 all 导致性能损耗 */
border: 1px solid red;
}
.smalldesc.expand {
max-height: 1000px; /* 足够容纳长文本，且可动画 */
}
⚠️ 注意事项：
- 勿使用 transition: all：它会强制重绘所有属性（如 color、border 等），降低性能；仅过渡 max-height 更高效、更可控。
- 1000px 并非绝对上限：若内容极长（如含多张图片或大量行内块），可改用 max-height: 100vh 或 max-height: 200vh（视容器最大预期高度而定），但需确保该值仍显著大于内容自然高度。
- JavaScript 触发简洁可靠：只需切换 class，无需 JS 计算真实高度，兼顾性能与可维护性：
document.querySelector('a').addEventListener('click', () => {
document.querySelector('.smalldesc').classList.toggle('expand');
});
✅ 进阶优化（可选）：动态获取真实高度（兼顾精确性）
若对动画精度要求极高（例如内容高度差异极大，1000px 显得冗余或仍有截断风险），可结合 JS 动态测量：
function toggleExpand(el) {
const wasExpanded = el.classList.contains('expand');
if (wasExpanded) {
el.style.maxHeight = '52px';
el.classList.remove('expand');
} else {
el.style.maxHeight = 'none'; // 临时设为 none 以获取真实 scrollHeight
const height = el.scrollHeight + 'px';
el.style.maxHeight = '0'; // 重置为 0，触发收缩动画起点
requestAnimationFrame(() => {
el.style.maxHeight = height;
el.classList.add('expand');
});
}
}
但该方案复杂度上升，需处理 scrollHeight 计算时机与动画同步问题。对于绝大多数场景，max-height: 1000px 方案已足够健壮、轻量且兼容性优秀（支持所有现代浏览器及 IE10+）。
总结：用「足够大的确定值」替代 none / auto，专注 max-height 过渡，是实现 CSS 驱动展开动画最简单、最可靠的方法——无需 JS 计算、无兼容性陷阱、代码清晰易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
