web-dev-qa-db-ja.com

CSS3-DOM削除の移行

keyframes を使用すると、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/

cssdomcss3keyframecss-animations
43
Steve

たとえば、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');
        });
    }
});
_

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

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

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

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

17
mercator

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

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

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

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

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

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

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

6
Arthur Goldsmith