1

同等のものはありますか...

$.fx.off = true;

...純粋な CSS アニメーション/トランジションの世界では?

jquery と css の両方を使用する大量のエントリ アニメーションがあるサイトで作業しているため、何かを変更してページをリロードするたびに、エントリ アニメーションが完了するまで 10 秒待たなければなりません。それはかなり退屈です。

4

3 に答える 3

0

CSS アニメーションを一般的にオフにする方法はありません。

このようなことをしたい場合は、アニメーションの断片を別の CSS クラスに配置します。

.AnimationOfWhatever {
    -webkit-animation: entryAnimation 10s;
    -moz-animation: entryAnimation 10s;
    -o-animation: entryAnimation 10s;
    -ms-animation: entryAnimation 10s;
    animation: entryAnimation 10s;
}

jQueryを介して最初のロードでそのクラスを適用します（jQueryについて言及したため）。

$('.ElementToAnimate').one('load',function(){
    $(this).addClass('AnimationOfWhatever');
});

これにより、アニメーションが 1 回だけ読み込まれます。そのクラスを 1 回だけ追加する場合は、localStorage 値を作成し、その値を確認します。

$(function(){
    if(localStorage['loaded'] === undefined){
        localStorage['loaded'] = 'true';
    }

    $('.ElementToAnimate').on('load',function(){
        if(!JSON.parse(localStorage['loaded'])){
            $(this).addClass('AnimationOfWhatever');
        }
    });
});

これにより、アニメーションはすべてのページで 1 回だけ実行されます。

于 2013-11-14T22:04:23.620 に答える
0

This will make all animations and transitions hop to the last frame instantly once started, and also removes the delays:

* {
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-delay: 0s !important;
    animation-delay: 0s !important;

    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
}

Demo

To apply it programmatically, change the selector to .no-anim * and apply the no-anim class to the <html> (or another containing element). Demo

I haven't tested this throughout yet, but it seems to work nicely for simple use cases at least. Feel free to adapt it to your needs, comment and improve.

于 2013-11-14T22:05:48.950 に答える