测量元素尺寸时忽略过渡

Question

在元素转换完成后，是否有一种优雅的方法来预测元素的尺寸？

例：

HTML：

<div id="demo">...</div>

CSS：

#demo {
  max-height: 0;
  overflow:hidden;
  transition: 2s max-height;
}

#demo.expand {
  max-height: 1000px;
}

JS：

 var demo = document.getElementById('demo');
 demo.className = 'expand';
 // Unfortunately the result will be 0px 
 // because the current height is measured
 alert(demo.offsetHeight);

演示：

codepen

Answer 1

scrollHeight您可以通过和属性检查请求的内容渲染高度/宽度scrollWidth。

例如尝试添加alert(demo.scrollHeight);到 JS 窗格。