58

キーフレームを使用すると、要素がDOMに挿入されるとすぐにアニメーション化することができます。CSSのサンプルを次に示します。

@-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を使用せずに）適用するために使用できる同様の機能はありますか？以下は、私がこのアイデアを試してみたjsFiddleです。解決策を知っている場合は、遠慮なくフォークしてください。

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

4

3 に答える 3

22

たとえば、という別のCSSアニメーションを作成しますfadeOut。次に、要素を削除する場合は、要素の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');
        });
    }
});

jsFiddleの更新バージョンも参照してください。少なくとも、Safariではそれでうまくいきます。

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

jQueryはまだCSSアニメーションを「実際に」サポートしているとは思わないので、それを取り除くことはできないと思いますwebkitAnimationEnd。Firefoxでは単にと呼ばれanimationendます。

CSSだけでこれを行う方法はないと確信しています。

于 2011-08-09T18:54:13.667 に答える
8

私はjavascriptのコンポーネントライブラリに取り組んできましたが、自分でこの問題に遭遇しました。問題に大量のJavaScriptをスローできるという利点がありますが、すでに少し使用しているので、適切に機能を低下させるソリューションとして次のことを検討してください。

コンポーネント/domノードを削除したら、「removing」というクラスを追加します。

次に、cssで、そのクラスを使用してアニメーションを定義できます。

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

そして、JavaScriptに戻って、「removing」クラスを追加した直後に、「animation」cssプロパティをチェックできるはずです。存在する場合は、「animationEnd」をフックできることがわかります。そうでなければ、すぐに要素を削除します。しばらく前にこれをテストしたことを覚えています。うまくいくはずです。サンプルコードを掘り下げることができるかどうかを確認します。

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

これは非常に実験的なものであり、自己責任で使用してください。ただし、ヘルプとフィードバックが必要です。:)

于 2012-07-31T22:56:59.760 に答える
-8

理想的には、fadeINやfadeOUTのようなものには、cssアニメーションではなくcssトランジションを使用する必要があります。

于 2012-10-17T10:31:48.440 に答える