Question

其他书呆子，我最近偶然发现了一些相当奇怪的东西，这实际上打破了我正在处理的网络应用程序...这是我通过（vanilla）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，添加类和删除类函数都有效。

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

Aske K。

Answer 1

是和否。

当您对CSS进行CSS更改时，更改会排队，然后在JavaScript完成后全部应用。

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

但是，即使进行了测量，我也不确定transition是否已正确应用。简单的方法是将removeClass异步，将其粘贴在setTimeout(... , 1)或（更好）requestAnimationFrame（在CSS更新后，称为下一帧）< / p>

是通过vanilla JavaScript async将CSS样式添加到HTML元素？

1 个答案: