JavaScript中CSS Transition不生效问题及调用栈内解决方案咨询

问题场景 #

我期望.col元素通过0.9s的transition平滑地从高度0%过渡到100%，但实际并未实现该效果。将el.style.height = '100%';放入setTimeout中可生效，但希望在调用栈内解决此问题，同时想了解当前代码失效的原因，改用for循环尝试后仍无效果。

现有代码 #

JavaScript

const Col = document.querySelectorAll('.col')

function onCol() {
  Col.forEach(function(el, idx) {
    el.style.transition = '0s';
    el.style.height = '0%';
    el.style.transition = '0.9s';
    el.style.height = '100%';
  });
}
onCol()

CSS

.work {
  display: flex;
  height: 140px
}

.col {
  background: red;
  width: 20px;
  height: 100%;
  margin-left: 5px;
  max-height: 0
}

HTML

<div class="work">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

失效原因 #

浏览器会将同一调用栈内的DOM样式修改合并为一次重绘重排操作。你连续设置height: 0%和height: 100%，浏览器只会执行最后一次的样式赋值，中间的0%状态不会被实际渲染，自然无法触发过渡动画——过渡需要元素有两个不同的已渲染状态作为起始和结束点。

调用栈内的解决方案 #

要在调用栈内解决，需要强制浏览器触发一次重排，让中间的height: 0%状态被确认并渲染，再设置最终的height: 100%。可以通过读取元素的布局属性（如offsetHeight）来触发重排，这类操作会强制浏览器计算当前元素的布局信息：

修改后的JavaScript代码 #

const Col = document.querySelectorAll('.col')

function onCol() {
  Col.forEach(function(el, idx) {
    el.style.transition = '0s';
    el.style.height = '0%';
    // 强制触发重排，确认当前样式状态
    void el.offsetHeight;
    el.style.transition = '0.9s';
    el.style.height = '100%';
  });
}
onCol()

额外CSS调整 #

你的CSS中max-height: 0会和height属性冲突，限制元素高度的实际渲染效果，建议移除该属性：

.work {
  display: flex;
  height: 140px
}

.col {
  background: red;
  width: 20px;
  height: 100%;
  margin-left: 5px;
  /* 移除max-height，避免干扰height过渡 */
}

这样修改后，就能在调用栈内实现平滑的高度过渡动画了。

内容的提问来源于stack exchange，提问作者Gloomy Young