JavaScript：触发 CSS 转换 window.setTimeout

Question

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

（我知道使用 CSS 动画，但这不仅仅是重复转换）。

CSS 转换将在属性更改时发生。出于我自己的目的，我使用 setAttribute 因为它将行为与其他 class 相关的东西隔离开来，但下面的行为是相同的。

假设 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();
}

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

我想要一个答案没有 jQuery.

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

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

谢谢

Answer 1

这是因为浏览器排队回流和重新布局的方式发生了变化。浏览器不会按顺序执行这些操作，就像您构建代码的方式一样。它将更改添加到队列并尝试一次执行多个操作（出于性能原因）。

浏览器正在尝试 "smart" 这里 - 它看到样式将完全像以前一样结束，因此属性的删除和重新添加在一次更新中一起批处理因此你看不到任何变化。添加 setTimeout，即使有 0 秒的延迟，也会强制浏览器在该点回流。

这是另一个类似问题的link：Force browser to trigger reflow while changing CSS

下面是一个完整的列表，其中包含 methods/properties 您可以在 JS 中调用以强制在您的 JS 中进行重排（而不是使用 setTimeout）： https://gist.github.com/paulirish/5d52fb081b3570c81e3a

JavaScript：触发 CSS 转换 window.setTimeout

JavaScript: Trigger CSS Transition with window.setTimeout

javascript

css

transition

setinterval