要素をフェードアウトし（その不透明度を0に移行）、終了したらDOMから要素を削除します。
jQueryでは、アニメーションの完了後に「削除」を指定できるため、これは簡単です。しかし、CSS3トランジションを使用してアニメーション化したい場合、トランジション/アニメーションがいつ完了したかを知る方法はありますか？
回答:
遷移の場合、以下を使用してjQuery経由で遷移の終了を検出できます。
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });Mozillaには優れたリファレンスがあります。
アニメーションの場合は非常に似ています。
$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });すべてのブラウザー接頭辞付きイベント文字列をbind（）メソッドに同時に渡して、それをサポートするすべてのブラウザーでのイベント発生をサポートできることに注意してください。
更新：
Duckが残したコメントごとに、jQueryの.one()メソッドを使用して、ハンドラーが1回だけ起動されるようにします。例えば：
$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });アップデート2：
jQuery bind()メソッドは非推奨になりました。on()メソッドはの時点で推奨されていjQuery 1.7ます。bind()
またoff()、コールバック関数でmethodを使用して、1回だけ呼び出されるようにすることもできます。one()メソッドの使用と同等の例を次に示します。
$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
// do something here
$(this).off(e);
});参照：
別のオプションは、jQuery Transit Frameworkを使用してCSS3遷移を処理することです。トランジション/エフェクトはモバイルデバイスで適切に実行され、アニメーションエフェクトを実行するためにCSSファイルに面倒なCSS3トランジションを1行追加する必要はありません。
要素をクリックすると要素の不透明度が0に遷移し、遷移が完了すると削除される例を次に示します。
$("#element").click( function () {
$('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});あります animationend観察できるイベントます。こちらのドキュメントを参照してください。CSS transitionアニメーションの場合も、transitionendイベントを使用できます
追加のライブラリは必要ありません。これらはすべてバニラJSで動作します
document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
this.innerHTML = "transition event ended";
}#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>これが便利な人のために、CSSクラスを介してCSSアニメーションを適用し、その後コールバックを取得するために成功したjQuery依存関数を次に示します。Backbone.jsアプリで使用していたため、完全には機能しない可能性がありますが、役に立つかもしれません。
var cssAnimate = function(cssClass, callback) {
var self = this;
// Checks if correct animation has ended
var setAnimationListener = function() {
self.one(
"webkitAnimationEnd oanimationend msAnimationEnd animationend",
function(e) {
if(
e.originalEvent.animationName == cssClass &&
e.target === e.currentTarget
) {
callback();
} else {
setAnimationListener();
}
}
);
}
self.addClass(cssClass);
setAnimationListener();
}ちょっとこう使った
cssAnimate.call($("#something"), "fadeIn", function() {
console.log("Animation is complete");
// Remove animation class name?
});http://mikefowler.me/2013/11/18/page-transitions-in-backbone/からのオリジナルのアイデア
そして、これは便利なようです：http : //api.jqueryui.com/addClass/
更新
上記のコードと他のオプションに取り組んだ後、CSSアニメーションの終了をリッスンすることに非常に注意することをお勧めします。複数のアニメーションが進行していると、イベントを聞くのに非常に速く混乱する可能性があります。小さなアニメーションも含め、すべてのアニメーションにGSAPのようなアニメーションライブラリを強くお勧めします。
e.stopImmediatePropagation(); self.trigger(this.whichAnimationEvent()); //for purge existing event callback.apply(self);
受け入れられた回答は現在、Chromeのアニメーションに対して2回起動されます。これはwebkitAnimationEndと同様に認識しているためと考えられanimationEndます。以下は間違いなく一度だけ発火します：
/* From Modernizr */
function whichTransitionEvent(){
var el = document.createElement('fakeelement');
var transitions = {
'animation':'animationend',
'OAnimation':'oAnimationEnd',
'MSAnimation':'MSAnimationEnd',
'WebkitAnimation':'webkitAnimationEnd'
};
for(var t in transitions){
if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
return transitions[t];
}
}
}
$("#elementToListenTo")
.on(whichTransitionEvent(),
function(e){
console.log('Transition complete! This is the callback!');
$(this).off(e);
});