javascript - 除非在设置之前查询 DOM 样式属性，否则将忽略过渡时间

Question

我正在使用 JavaScript 创建一个 div 并将其插入到页面中。我通过更改父 div 的 transform: translateY 将其向上移动 div 的高度，插入 div，然后将其向下滑动来做到这一点。

基本代码如下:

attachTo.style.transform = 'translateY(-' + divHeight + 'px)';
attachTo.insertBefore(div, attachTo.firstElementChild);
attachTo.style.transition = 'transform 2s';
attachTo.style.transform = 'translateY(0)';

使用该代码，转换时间将被忽略，添加的 div 将正常弹出。但是，如果我将其更改为这样的内容:

attachTo.style.transform = 'translateY(-' + divHeight + 'px)';
attachTo.insertBefore(div, attachTo.firstElementChild);

// Either of these can be used, as can any statement or expression that queries an element's CSS styles. 
console.log(document.body.clientHeight);
var foo = pageWrap.offsetParent;

attachTo.style.transition = 'transform 2s';
attachTo.style.transform = 'translateY(0)';

div 将正确设置动画。对我来说不足为奇的是，我还可以在零长度超时中包装最终转换和转换更改。

Firefox 和 Chromium 中的行为相同。

我的问题是为什么会这样，为什么代码没有同步执行？我认为它与浏览器的执行队列有关，如 this question 中所述关于零长度超时，但我不仅想知道确实如此，我还想解释为什么使用 DOM 元素的 style 属性可以达到相同的效果(我猜它会在执行过程中造成轻微的停顿).

Answer 1

当 javascript 运行一系列命令时，浏览器不会重绘元素，直到它完成，或者如果有人告诉它，并且由于最后一个命令重置一切，没有任何反应。

许多其他编程语言也是如此。

所以要么必须将它放在一个函数中，在本例中使用 setTimeout，要么在两者之间调用例如 window.scrollHeight，以使浏览器重绘.

为什么使用属性是因为 javascript 没有方法，例如 Dot.Net 中的 Application.DoEvents();。

来源:What forces layout / reflow in a browser