是否通过vanilla JavaScript async向HTML元素添加css样式？

书呆子们，我最近偶然发现了一个相当奇怪的东西，它基本上破坏了我正在开发的web应用程序。。。也就是说，我通过（普通的）javascript添加到HTML元素的css属性似乎是异步的，以证明我有一小段代码

   ...

    _( leftView ).addClass('notrans');
    _( rightView ).addClass('notrans');

    if ( fromLeft ) {
        if ( !rightFocused ) {
            _( leftView ).css({ 'left' : '-100%' })
            _( rightView ).css({ 'left' : '-50%' });
        } else _( leftView ).css({ 'left' : '-50%' });
    }

    if ( fromRight ) {
        if ( !leftFocused ) {
            _( leftView ).css({ 'left' : '100%' });
            _( rightView ).css({ 'left' : '150%' });
        } else _( rightView ).css({ 'left' : '100%' });
    }

    _( leftView ).removeClass('notrans');
    _( rightView ).removeClass('notrans');

    ...

注意：您随处可见的小下划线是我制作并测试的一个小库。。。我99%确信CSS、add class和remove class函数能够正常工作

现在的问题是，当我进入代码的remove类部分（最后两行）时，CSS似乎还没有被应用。因此，当它最终完成时，我已经删除了notrans类，元素将随着转换而移动，而不是没有。这可以用1ms的超时时间来修复，但是会破坏其他一些东西。。。那么，有没有人知道通过JS添加CSS属性是否是异步的，以及如何修复它呢？：）

问K.

是和否

当JavaScript对CSS进行更改时，这些更改将排队，然后在JavaScript完成时一起应用

例外：某些属性导致重新计算。例如，获取测量值（如

offsetHeight

）会导致浏览器应用任何挂起的CSS更改，进行测量，然后继续

---

然而，即使进行了测量，我也不确定是否正确应用了

转换。简单的方法是使
removeClass
异步，方法是将它粘贴在
setTimeout（…，1）
或（更好的）
requestAnimationFrame
（这被称为下一帧，在CSS更新之后很长一段时间内）
您能向我们展示实际添加和删除样式的库代码吗？而且它不是普通的，它是一个库：它只是你写的一个库。这里有多少元素受到影响？如果数量非常大，比如说超过5000个，那么渲染引擎可能还没有完成渲染和计算css中所做的更改。如果它更像是100个元素，那么情况可能就不是这样了。@TravisJ这不会使它异步。@zfrisch-不会，但会使它看起来不同步。@TravisJ在测试时它实际上只影响2个HTML元素，所以这不是问题，但无论如何，谢谢。哦，非常感谢，通过在元素上调用OffsetSight来工作，甚至在转换上，你是一个真正的英雄：）老实说，我实际上不知道在JS执行上下文期间对css所做的更改是排队的。你有关于这个的链接吗，这样我就可以多读一点吗？@TravisJ，不幸的是，我没有。这只是我在经历中学到的东西之一，我知道我在某个地方读过，但那是很久以前的事了。我在github上找到了一个列表，尽管没有太多引用：。我惊讶地看到上面有
.innerText
。