[解決済み】CSS3遷移の終了を待つためにjQueryを使用するには？

質問

ある要素をフェードアウトさせ（不透明度を0に遷移させ）、終了したらその要素をDOMから削除したいのですが、可能ですか？

jQueryでは、アニメーションが完了した後に"Remove"を指定することができるので、これは簡単です。しかし、CSS3トランジションを使ってアニメーションさせたい場合、トランジションやアニメーションが完了したことを知る方法はあるのでしょうか？

解決方法は？

トランジションについては、jQueryを利用してトランジションの終了を検出するために、以下を使用することができます。

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozillaに素晴らしいリファレンスがあります。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

アニメーションの場合は、非常に似ていますね。

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

bind() メソッドに、ブラウザのプレフィックスつきイベント文字列をすべて同時に渡すと、 サポートしているすべてのブラウザでイベントが発生するようになることに注意しましょう。

更新してください。

Duckさんが残してくれたコメントによると、jQueryの .one() メソッドを使用して、ハンドラが一度だけ起動するようにします。例えば

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

アップデート2

ジャクエリ bind() メソッドは非推奨となり on() メソッドが優先されます。 jQuery 1.7 . bind()

を使用することもできます。 off() メソッドをコールバック関数に追加して、一度だけ起動されるようにします。を使用するのと同等の例です。 one() メソッドを使用します。

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

参考文献

• .off()

• .one()