CSS3 - DOM削除に関する遷移

Question

keyframesを使用すると、DOMに挿入するとすぐに要素をアニメートすることができます。

@-moz-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@-webkit-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

#box { 
    -webkit-animation: fadeIn 500ms; 
    -moz-animation: fadeIn 500ms; 
    animation: fadeIn 500ms; 
} 

いくつかの似たような機能は、それがDOMから削除される直前の要素に（CSS、JavaScriptをなし経由）アニメーションを適用するために利用可能である：ここではいくつかのサンプルCSSですか！以下は、私がこのアイディアを持って遊ぶために作ったjsFiddleです。あなたが解決策を知っていれば自由にフォークすることができます。

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Answer 1

fadeOutと呼ばれる別のCSSアニメーションを作成し、言います。そして、あなたが要素を削除したいとき、その新しいアニメーションの要素にanimationプロパティを変更し、アニメーションが完了すると、要素の実際の除去をトリガするanimationendイベントを使用します。

$('.hide').click(function() { 
    if (!$(this).hasClass('disabled')) { 
     $('#fill').css('-webkit-animation', 'fadeOut 500ms'); 
     $('#fill').bind('webkitAnimationEnd',function(){ 
      $('#fill').remove(); 
      $('.show, .hide').toggleClass('disabled'); 
     }); 
    } 
}); 

See also my updated version of your jsFiddle.が機能することSafariで私のために、少なくとも。

まあ、その代わりに、.css()のクラスを使用する必要があります。

jQueryはまだCSSアニメーションを "本当に"サポートしているとは思わないので、あなたはそれを取り除くことができるとは思わない。webkitAnimationEnd Firefoxでは、それはちょうどanimationendと呼ばれています。

私は確かにCSSでこれを行う方法はありません。

Answer 2

私はjavascriptのコンポーネントライブラリで作業していましたが、私はこの問題を自分で実行しました。私はこの問題で多量のjavascriptを投げることができるという利点がありますが、既に少し使い慣れているので、優雅な解消のために次の点を考慮してください。

コンポーネント/ 「削除」と呼ばれるクラスです。

次にCSSにあなたがそのクラスを使用してアニメーションを定義することができます。JavaScriptで

.someElement.removing { 
    -webkit-animation: fadeOut 500ms; 
    -moz-animation: fadeOut 500ms; 
    animation: fadeOut 500ms; 
} 

、バック、あなたは「削除」クラスを追加した直後に、あなたは「アニメーションをチェックすることができるはず'cssプロパティがあり、存在する場合は、' animationEnd 'にフックできることがわかります。そうでない場合は、すぐに要素を削除してください。私はこれをしばらく前にテストすることを覚えています。私はサンプルコードを掘り下げて見ることができます。

アップデート：私はこのテクニックを掘って、あなたが削除されているDOM要素のためのCSS3アニメーションを使用することができますjQueryのための本当にクールなプラグインを書き始めました 。追加のJavascriptは必要ありません：http://www.github.com/arthur5005/jquery.motionnotion

これは非常に実験的なものですが、自己責任で使用してください。ヘルプとフィードバックが大好きです。 :)あなたは、CSSトランジションないCSSアニメーションを使用する必要がありフェードインとフェードアウトのようなもののための理想的

Answer 3

..