临时切换为height:auto获取自适应高度实现元素高度过渡为何不生效？

你的实现无法触发平滑过渡，存在两个核心逻辑漏洞：

• 浏览器同步渲染的批处理机制
  浏览器执行同步JS代码时，所有DOM样式修改不会立刻触发重排、重绘，而是统一暂存到队列中，等当前JS执行栈完全清空后，才会一次性处理所有样式变更、计算最终布局并渲染页面。
  你连续三次修改height属性的操作全部在同一个同步执行块内完成，浏览器根本没有机会在「将height重置回初始预设值」的节点单独完成一次样式计算，所有连续的样式修改会被合并为最终的一次值变更，直接把元素从初始50px的状态渲染到100px的最终状态。
  CSS过渡触发的前提，是元素的计算样式在两个独立的渲染帧之间存在可计算的数值差。整个流程的修改没有拆分到独立的渲染节点，浏览器会直接跳过过渡过程，不会出现平滑的高度变化。
• 初始高度的取值偏差
  你通过scrollHeight读取的是元素全部内容的总高度，不是元素当前实际布局占据的高度（本例中元素因为CSS预设了50px固定高度，实际布局高度为50px，溢出的子元素内容不会改变布局尺寸）。按你的代码逻辑，第一步读取的containerCurrentHeight值为100px（内容总高度），后续设置height:auto后读取的containerNewHeight同样是100px，两个值完全相等，哪怕没有渲染批处理的问题，也不存在可过渡的高度差。

只需要调整两个细节即可达到预期效果：

1. 改用offsetHeight（或clientHeight）读取元素当前实际布局的预设高度，避免取错值。
2. 在将height重置回预设高度后，强制触发一次同步重排（读取offsetHeight这类会强制浏览器立刻计算布局的属性），让浏览器确立预设高度为过渡的起点，再设置最终的自适应高度，即可正常触发过渡。

修正后的代码：

const containerBlockDiv = document.querySelector('.container-block')
const childBlockDiv = document.querySelector('.child-block')

// 读取元素当前实际布局的预设高度
const containerCurrentHeight = containerBlockDiv.offsetHeight
containerBlockDiv.style.height = 'auto'
// 读取auto状态下的内容自适应总高度
const containerNewHeight = containerBlockDiv.scrollHeight
// 强制把高度设回预设值
containerBlockDiv.style.height = `${containerCurrentHeight}px`
// 强制触发同步重排，确立过渡起点
containerBlockDiv.offsetHeight
// 设置目标高度，触发1s平滑过渡
containerBlockDiv.style.height = `${containerNewHeight}px`

补充说明：强制触发重排的操作之所以能生效，是因为这类布局属性的读取会打断浏览器的渲染批处理流程，强制浏览器立刻完成一次布局计算和样式应用，把当前的height状态固定为过渡的初始值。

内容的提问来源于stack exchange，提问作者Stefan Bajić