web-dev-qa-db-ja.com

jqueryはcssアニメーションが再生された後にクラスを削除しますか？

私はcssコードを持っています：

body.start{-webkit-animation:srcb ease-in .4s 1;}

ウェブサイトに入ったら一度だけプレイしてください

しかし、問題はアニメーションが行われている間です

私のサイトのボタンが機能しません

アニメーションが完了した後、ボディクラス「開始」を削除するにはどうすればよいですか。

または、アニメーションが再生されてからx秒後にクラス遅延を削除しますか？

jquerycsshtmlanimationwebkit
11
jk jk

transitionend イベントにバインドできます（実際には、それらすべてに）：

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).removeClass("start");
    }
);

遅延を実装する場合は、次のことができます queue（） クラス削除操作：

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
            $(this).removeClass("start").dequeue();
        });
    }
);

注：on（） jQuery 1.7以降にのみ存在します。古いリリースを使用している場合は、-を使用する必要があります。 bind（） 代わりに、上記のコードが機能します。

29
Frédéric Hamidi

試してみてください

webkitAnimationEnd oanimationend msAnimationEnd animationend

の代わりに

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

これは私のために働いた。

15
zeno2k

おそらく別の方法ですか？

$(window).load(function(){
    setTimeout(function(){
        $('body.start').removeClass('start')
    }, 4000);
});
2
Atif Mohammed Ameenuddin

コードは次のとおりです。

var div = document.querySelector('div');

function callback() {
    div.classList.remove('start'); // or modify div.className
}

div.addEventListener("webkitAnimationEnd", callback, false);

これを確認してください 実例 jsbinで。

アニメーションと私のソリューションは、Webkitベースのブラウザでのみ機能することに注意してください。実稼働環境では、他のブラウザーおよび必須のプレフィックスなしのソリューションを考慮する必要があります。

1
dreame4

私にとってうまくいったのは、イベントリスナーの開始時に常にアニメーションクラスを削除し、その間に小さなコードを実行してから、アニメーションクラスを再度追加することでした。これで、常にアニメーションがトリガーされます。私の場合、パスワードが間違っていた場合にウォブルアニメーションをトリガーしたかったのです。あなたの理由がわからない。アニメーションを削除して、送信を繰り返し押して間違っていた場合でも、アニメーションが常に再度トリガーされるようにしたかったのです。

$j('#submitLogin').on('click',function(){    
    if(true){
       //login
    }else{
       $j('.lockIcon').removeClass('wobble-hor-top');
       $j(this).prev().prev().addClass('invalid');
       $j('.loadIconKey').hide();
       $j('.lockIcon').addClass('wobble-hor-top');
    }
});
0
Kenneth Kimbrell