为何jQuery设置元素height为auto时，CSS height过渡动画不生效？

这个问题本质是CSS过渡的核心运行机制决定的，咱们一步步拆解清楚：

核心原因：CSS过渡需要可计算的数值区间 #

CSS transition 动画能生效的前提是过渡的起始值和目标值必须是浏览器可以计算的具体数值：

• 当你执行 jQuery("#a").css("height", "200px") 时，元素的高度会从当前的具体高度值（比如初始默认高度，或是之前设置的固定值），平滑过渡到200px。浏览器能轻松算出两个数值之间的每一步中间高度，所以过渡动画能正常触发。
• 而 height: auto 是一个动态关键字，它代表元素根据内部内容自动计算高度，并不是像素、百分比这类固定的具体数值。浏览器没办法在「当前具体高度」和「auto的动态高度」之间生成连续的过渡中间值——因为auto的实际高度由内容决定，没有明确的“中间状态”可以逐步变化，所以浏览器会直接跳过过渡动画，让元素瞬间切换到auto对应的高度。

实现类似auto效果的过渡小技巧 #

如果想要实现元素高度自适应内容的过渡动画，可以通过先获取auto状态下的具体高度，再过渡到这个数值的方式模拟：

// 获取元素在auto状态下的实际高度
const targetHeight = jQuery("#a").height();
// 先把元素高度设为当前的具体值（避免直接跳变）
jQuery("#a").css("height", jQuery("#a").height() + "px");
// 触发浏览器重绘（部分浏览器需要这一步来识别状态变化）
jQuery("#a")[0].offsetHeight;
// 过渡到目标高度
jQuery("#a").css("height", targetHeight + "px");

需要注意的是，如果元素内部内容发生变化，需要重新计算目标高度才能保证动画正常。

内容的提问来源于stack exchange，提问作者Ted Scheckler