jqueryでクラスを削除するのが速くないのはなぜですか？

ほとんどの私のウェブサイトでanimate.cssを使用していますが、それは恐ろしいことですが、頻繁に問題に悩まされました。jqueryでクラスを削除するのが速くないのはなぜですか？

このリンクを参照してください - あなたが点検したい場合は、以下の>http://quemfazsite.com.br/temp/teste8.php

コード：私はクラス「flipInX」ページがロードで、既に要素を持っている

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" /> 


</head> 

<body> 

<div onclick="$('#xxx').removeClass('flipInX').addClass('flipInX');" style="cursor:pointer;">CLICK TO ANIMATE IMMEDIATLY!</div> 

<div onclick="$('#xxx').removeClass('flipInX'); window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);" style="cursor:pointer;">CLICK TO ANIMATE WITH TIMEOUT!</div> 

<div id="xxx" style="background:#FF0000; width:500px; height:500px;" class="animated flipInX"></div> 

</body> 
</html>

。最初のボタン（ページの上部）をクリックすると、このクラスを削除してもう一度追加するだけです。しかし、アニメーションの出来事はありません！私はこれを使用します。

$('#xxx').removeClass('flipInX').addClass('flipInX');

をしかし、私は番目のボタン（下記のコード）を使用する場合、アニメーション処理が行われます。

$('#xxx').removeClass('flipInX'); 
window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);

はjQueryを使って、いくつかのバグがありますか？つまり、クラスが「removeClass」で削除されていれば、クラスが追加されたときに効果が働いているはずです。何が起こっているのですか？どのように解決できますか？

EDIT：

以下のコードは、あまりにも動作しませんので、遅延の原因を使用して、あなたの時間を無駄にする必要がいけないが、生憎それは文句を言わない仕事:(

$('#xxx').removeClass('flipInX').delay(1000).addClass('flipInX');

出典

2017-08-16 Samul

"このリンクを参照してください - >"いいえ問題を見るためにあなたの質問に[mcve]を投稿してください。未知のサードパーティーのサイトを訪問するのが好きではなく、問題が修正されると、関連するコードの問題はなくなります。 – j08691

@ j08691申し訳ありません親愛なる友人、私はあなたがそれをよりよく見ることができるようにコードを貼り付けました。 – Samul

-1

をアニメーションの実行に遅延があり、中にミリ秒。あなたがクラスを削除し、すぐにそれを再度追加すると、アニメーションを実行する時間がありません

。jQueryの「追加」「削除」との間で実行するアニメーションのための「待機」しません。

setTimeout()は、クラスを再追加する前にクラスの削除のアニメーションを表示するために必要です。これは、jQueryにその間を待たせる方法です。

そして.delay()はjQueryアニメーションキューで動作します...したがって、2つのanimate()の間で動作します。 CSSアニメーションを呼び出すaddClass()とremoveClass()の間では機能しません。

EDIT

あなたがCDNからCSSアニメーションを使用したい場合はsetTimeout()を使用するために選択の余地はありません。
これ以外の場合は、@keyframe ...
を使用して独自のCSSアニメーションを作成できます。ただし、マークアップの簡素化について懸念がある場合は、クリックハンドラに含めることができます。クラスanimatedが必要です。

$(".animated").on("click",function(){ 
    $(this).removeClass("flipInX"); 
    var that=$(this); 
    setTimeout(function(){ 
    that.addClass("flipInX"); 
    },100); 
});

CodePen

出典

2017-08-16 14:57:37

こんにちは私の友人、setTimeoutを使用すると、私はこのremoveClass（）。addClass（）を私のコードの多くの場所で使用し、jqueryが許可する連鎖を壊すでしょう。私はremove（）.setTimeout（100）.addClass（）のように何かすることはあるのですか？それで、chaiinの残りのコードは100ms後にしか実行されませんか？ – Samul

簡単なマークアップについて、好きなように編集しました。 –

Downvoter、コメントに自由に落ちた！ –

遅延が（addClass、最初の問題、のsetTimeout（の使用）または.queue動作しない）が推奨されます。

でもよい。アニメーション（）はあなたが達成しようとしているものの良い方法です

出典

2017-08-16 15:09:37 Neil

私はアニメートが好きではありません、申し訳ありません！それは速くない。あなたはjQueryが許しているチェーンを使ってsetTimeoutを使用することを幾分知っていますか？ – Samul

jqueryでクラスを削除するのが速くないのはなぜですか？

答えて

関連する問題