javascript - JavaScript を使用して DOM に追加された要素で CSS3 トランジションをトリガーするにはどうすればよいですか?

Question

JavaScript を使用してガント チャート スタイルのスケジュール ビューを作成しており、予定を左から絶対位置のインライン値に移行させようとしています。これを処理するために CSS3 トランジションを使用したいと思います。

個々の予定が追加され、javascript を介してプロットされ、マークアップでは次のようになります。

<div class="appt" style="width: 12.5%; left: 32.5874%;"></div>

.appt クラスには-webkit-transition: all .3s ease-in;withtop: 0; left: 0宣言があります。

これらの予定が DOM に追加されると、インライン スタイルの位置にアニメーション化されると思いました。これどうやってするの？

関連する簡単な例を次に示します。http://codepen.io/aaronlsilber/pen/ocqFl

Answer 1

追加する前に設定して CSS トランジションをトリガーしleft: 0、追加後に .css() jQuery 関数を介してインライン css を必要に応じて変更します。

例：

$('<div class="appt" style="width: 12.5%; left: 32.5874%;"></div>').appendTo(/*ELEMENT*/);

$('.appt').css('left', '32.5874%');

警告: すべてのブラウザーが CSS トランジション (IE9 など) をサポートしているわけではありません。この効果がユーザー エクスペリエンスにとって必須である場合は、jQuery .animate() の使用をお勧めします。

http://api.jquery.com/animate/