javascript - CSS トランジション - 新しく追加されたコンテンツのクラス変更で起動しないのはなぜですか?

Question

例を次に示します: http://dabblet.com/gist/5652844

新しい要素を作成し、クラスを設定し、それを親に追加し、すぐにクラスを切り替えて、遷移がトリガーされるようにします。このような：

var div = document.createElement("div");
div.setAttribute("class", "left");
document.body.appendChild(div);
div.setAttribute("class", "right");

クラスは単にleft値を設定するだけですが、div にはtransition: left .5s ease;.

さて、なんらかの理由で、2 番目の前に短い遅延 (10 ～ 20 ミリ秒が機能しているようです) を追加した場合にのみ、トランジションがトリガーされますsetAttribute()。

私の質問は次のとおりです。これを行うためのよりクリーンな方法はありますか? appendjQueryとを試しましaddClassたが、同じ動作を示します。jQuery UIswitchClassは機能しているように見えますが、ランダムな遅延値に依存する代わりに、より良い方法はありませんか?