JavaScript: Trigger CSS Transition с window.setTimeout

Question

Это (очевидно) часть более крупного проекта, но я пытаюсь вызвать переход CS на setTimeout.

(Я знаю об использовании анимации 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

Это происходит потому, что, как браузер очередей оплавления и relayout изменения. Браузер не делает эти вещи последовательно, как то, как вы структурировали свой код. Он добавляет изменения в очередь и пытается выполнить несколько операций сразу (по соображениям производительности).

Браузер пытается быть «умным» здесь - он видит, что стили заканчиваются точно так, как они были раньше, поэтому удаление и повторное добавление атрибута объединяются в одно обновление, и, таким образом, вы не вижу изменений. Добавление setTimeout, даже с задержкой 0 секунд, заставляет браузер переходить в эту точку.

Вот ссылка на другой аналогичный вопрос: Force browser to trigger reflow while changing CSS

А вот полный список методов/свойств вы можете вызвать в JS, чтобы заставить переформатирования в ваших JS (вместо использования setTimeout): https://gist.github.com/paulirish/5d52fb081b3570c81e3a