Jqueryでクラスを追加してCSS3トランジションをトリガーする

Question

現時点では、クラスを追加するときにcss3不透明トランジションを取得しようとしています。基本的な設定は、ボタンをクリックしてからjqueryを使ってdomにdivを追加し、DOMにその要素を追加した後にクラスを追加することです。その新しいDOM要素への追加クラスは、私の移行を開始すると思われますが、そうではありません。唯一起こっていることは、要素が表示されていますが、不透明遷移が機能していないことだけです。どんな助けでも大いに感謝されます、私はフィドルへのリンクを残しています ここにfiddle link。はい私はちょうどjqueryでフェードインをすることができます知っていますが、これはおそらく他のCSSを蹴るために使用される、その他の不透明度の変更

Answer 1

CSS3のトランジションは、動的に作成された要素ではまだサポートされていないと思います。私はdivをHTMLに直接配置してサンプルを修正しようとしましたが、トランジションは正常に動作しました。ブラウザーのサポートが改善されるまで、回避策としてそれを使用しなければならないかもしれません。

Answer 2

これまでにこの問題が発生しました。唯一の解決策は、DOMに新しい要素があることを通知するsetTimeoutを追加することです。これは、ゼロミリ秒にすることができ、それはまだ動作します：

$('button').live('click', function() { 
    $(this).after("<div class='fade'>This is just a test</div>") 
    setTimeout(function(){$(".fade").addClass("in");}, 0) 
}); 

http://jsfiddle.net/tfmFx/