height: auto无法过渡因值不固定，可用max-height模拟或JS获取offsetHeight实现精准动画，推荐根据场景选择方案。
在CSS中实现元素高度的过渡效果，尤其是从0到auto或从auto到0的变化，是一个常见但容易出问题的需求。直接对height: auto使用transition是无效的，因为auto不是一个可计算的数值，浏览器无法计算过渡过程。
为什么 height: auto 不能直接过渡？
height: auto 是一个动态值，由内容决定，浏览器无法知道它从多少变到多少，因此无法生成中间帧进行动画。即使设置了 transition，高度变化也会瞬间完成，没有平滑效果。
解决方案一：使用 max-height 模拟过渡
一个常见技巧是使用 max-height 来替代 height 进行过渡。
优点： 实现简单，兼容性好。缺点： 动画不够精确，如果 max-height 设置过大（如
1000px），动画时间会显得拖沓。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.element {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.element.open {
max-height: 500px; / 要大于内容实际高度 /
}
JavaScript 控制显示/隐藏：
element.classList.toggle('open');
解决方案二：JS 获取实际高度并动态设置 transition
更精确的做法是通过 JavaScript 获取元素展开后的实际高度，然后动态设置 height 和 transition。
步骤如下：
系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统，并可集合系统强大的新闻、产品、下载、人才、留言、搜索引擎优化、等功能模块，为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统，自动阻止恶意访问和攻击；安全检查应用于每一处代码中，每个提交到系统查询语句中的变量都经过过滤，可自动屏蔽恶意攻击代码，从而全面防止SQL注入攻击
- 先将元素显示（
visibility: hidden或临时移除max-height） - 用
offsetHeight获取真实高度 - 再设置目标
height并开启过渡
示例代码：
立即学习“前端免费学习笔记（深入）”；
function open(element) {
element.style.height = 'auto';
const height = element.offsetHeight + 'px'; // 获取实际高度
element.style.height = '0px';
// 强制重绘
element.offsetHeight;
// 开启动画
element.style.height = height;
element.style.overflow = 'hidden';
element.style.transition = 'height 0.3s ease-out';
}
function close(element) {
element.style.height = '0px';
}
注意：需要在设置初始高度前触发一次重排（offsetHeight），确保浏览器应用“无过渡”的状态。
解决方案三：使用 CSS scrollHeight + requestAnimationFrame
适用于更复杂的动态内容。通过监听内容变化，用 JS 设置精确的 height 值并配合 CSS 过渡。
也可以封装成通用函数，自动处理任意高度变化。
推荐做法总结
对于大多数场景：
- 简单折叠菜单、提示框 → 使用 max-height 方案，设置合理值
- 需要精准动画、内容高度差异大 → 使用 JS 获取 offsetHeight 的方式
- 避免对
height: auto直接加 transition - 始终设置
overflow: hidden防止内容溢出
基本上就这些方法，关键是理解浏览器如何计算过渡，以及如何让 height 变成一个可动画的数值。
