JavaScript：使用 window.setTimeout 触发 CSS 转换

这（显然）是一个更大项目的一部分，但我正在尝试触发 CS 转换setTimeout.

（我知道如何使用 CSS 动画，但这不仅仅是重复的过渡）。

当属性更改时，将发生 CSS 转换。为了我自己的目的，我使用setAttribute因为这将行为与其他与类相关的内容隔离开来，但下面的行为是相同的。

假设 HTML 和其他代码已就位，以下是简化版本：

var test=document.querySelector('div#test');    
window.setInterval(doit,4000);
function doit() {
    test.removeAttribute('thing');
    test.innerHTML=new Date();
    test.setAttribute('thing',null);
}

CSS 是：

div#test {
    opacity: 0;
}
div#test[thing] {
    transition: opacity 1s;
    opacity: 1;
}

我尝试的技巧是更改清除属性，然后再次设置它 - 这应该会触发 CSS 更改。它不能像上面那样工作。然而，如果我延迟设置属性 0 秒，它确实有效：

function doit() {
    test.removeAttribute('thing');
    window.setTimeout(function() {
        test.setAttribute('thing',null);
    },0);
    test.innerHTML=new Date();
}

问题是：为什么它不起作用，除非我添加这个微小的延迟，并且有更好的方法来做到这一点吗？

我想要一个答案without jQuery.

注意：我已经接受了下面的答案。以下代码将起作用：

function doit() {
    test.removeAttribute('thing');
    test.offsetHeight;                  //  force update
    test.innerHTML=new Date();
    test.setAttribute('thing',null);
}

Thanks

这是因为浏览器对回流和重新布局更改进行排队的方式。浏览器does not像构建代码一样按顺序执行这些操作。它将更改添加到队列中并尝试一次执行多个操作（出于性能原因）。

浏览器在这里试图变得“聪明” - 它看到样式将完全像以前一样结束，因此属性的删除和重新添加在一次更新中批量处理，因此您看不到任何变化。添加setTimeout，即使有 0 秒的延迟，也会强制浏览器在该点重排。

这是另一个类似问题的链接：强制浏览器在更改 CSS 时触发重排

这里有一个完整的方法/属性列表，您可以在 JS 中调用以强制在 JS 中进行回流（而不是使用setTimeout): https://gist.github.com/paulirish/5d52fb081b3570c81e3a