JavaScript：window.setTimeoutを使用してCSSトランジションをトリガー

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の変更を引き起こすはずです。上記のように動作しません。しかし、は私が0秒でattribut遅延設定ならば、それは仕事を行います。私はこの微小遅延を追加しない限り、なぜそれが動作しない、とこれを行うには良い方法があります：

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

をこれは、ブラウザのキューが再レイアウトの変更をリフローし、どのようにです。ブラウザはでコードをどのように構造化したかのように順番に実行しません。変更をキューに追加し、パフォーマンス上の理由から複数の操作を一度に実行しようとします。

ブラウザはここで「スマート」になりようとしています。スタイルが以前と同じように見えるので、属性の削除と再追加が1つの更新でまとめてバッチ処理されます変更は見ないでください。 setTimeoutを追加すると、0秒の遅延があっても、ブラウザはその時点で強制的にリフローします。

ここでは別の同様の質問へのリンクです：Force browser to trigger reflow while changing CSS

そして、ここでは、あなたが（代わりにsetTimeoutを使用しての）あなたのJSでリフローを強制的にJSで呼び出すことができるメソッド/プロパティの包括的なリストです： https://gist.github.com/paulirish/5d52fb081b3570c81e3a