Question

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

（我知道使用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更改。它不像上面那样工作。但是，如果我延迟将attribut设置为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

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

浏览器正试图变得聪明＆＃34;在这里 - 它看到样式将完全像以前一样结束，因此属性的删除和重新添加在一次更新中被批处理，因此您看不到任何更改。添加setTimeout即使延迟时间为0秒，也会强制浏览器在此时重新进行回流。

这是指向另一个类似问题的链接：Force browser to trigger reflow while changing CSS

这里有一个完整的方法/属性列表，您可以在JS中调用它来强制在JS中重排（而不是使用setTimeout）： https://gist.github.com/paulirish/5d52fb081b3570c81e3a

JavaScript：使用window.setTimeout触发CSS过渡

1 个答案: