通过vanilla JavaScript异步将css样式添加到HTML元素中？

同伴们，我最近偶然发现了一些相当奇怪的东西，基本上破坏了我正在处理的网络应用程序......我通过（vanilla）javascript添加到HTML元素中的css属性，似乎是异步的证明我有一个小小的一段代码...通过vanilla JavaScript异步将css样式添加到HTML元素中？

... 

    _(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，添加类并删除类功能的工作。

现在，问题是，当我到达代码的remove类部分（最后两行）时，CSS似乎还没有被应用。所以当它终于做到的时候，我已经删除了notrans类，并且元素将会随着转换而不是无。这可以通过一个1ms的超时来解决，但是会破坏一些其他的东西......所以有人知道通过JS添加CSS属性是否是异步的，以及如何解决它？:)

Aske K.

来源

2017-04-26 Aske Lange

你能告诉我们库代码*实际上添加并删除样式*？此外，它不是香草，它是一个图书馆：它只是一个你写的图书馆。 – msanford

这里有多少元素受到影响？如果数量非常大，可以说超过5,000，那么渲染引擎可能没有完成渲染并计算在css中所做的更改。如果它更像100个元素，那么情况可能并非如此。 –

@TravisJ这不会使它异步。 – zfrisch

是和否。

当您对JavaScript进行CSS更改时，更改会排队，然后在JavaScript完成时将所有更改一起应用。

例外：某些属性导致重新计算完成。例如，获取诸如offsetHeight之类的度量值会导致浏览器应用任何待处理的CSS更改，进行测量，然后继续。

但是，即使进行了测量，我也不确定transition是否正确应用。简单的方法是通过在setTimeout(... , 1)或更好的（这被称为非常下一帧，在CSS更新之后很好）将其粘贴到removeClass异步

来源

2017-04-26 18:20:02

哦，非常感谢，通过在元素上调用offsetHeight工作，即使在转换时，你也是一个真正的英雄:) –

说实话，我其实并没有意识到在JS执行上下文中对css所做的更改已经排队。你有什么链接，所以我可以多读一点吗？ –

@TravisJ不幸的是，我不这样做。这只是我从我的经历中获得的东西之一，而且我知道我在某处读过它，但这是很久以前的事了。 –

通过vanilla JavaScript异步将css样式添加到HTML元素中？

回答

相关问题