2

私が達成したいのは、アクションに対する脈動効果です（ボタンクリックなど）。だから私が作ったのはこれです（簡略化された[削除されたブラウザの仕様]）：

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.02);}
  100% {transform: scale(1);}
}

.pulsate{
  animation-name: pulse 0.2s linear 2;
}

そしてjQueryで私はこれをしました:

$('#btn').click(function(e)){
    e.preventDefault();
    $('#some_element').addClass('pulse');
}

正常に動作しますが、初めてです...「パルス」クラスが追加されると、もうトリガーされません...だから私がやろうとしたことは次のとおりです。

$('#btn').click(function(e)){
    e.preventDefault();
    $('#some_element').removeClass('pulsate').addClass('pulsate');
}

そして、それはまだ機能していません...これに反して：

$('#btn').click(function(e){
    e.preventDefault();     
    $('#some_element').toggleClass('pulsate');
}

これは 2 回目ではなく 1 回目で機能しますが、3 回目で再び機能します。基本的に隔週です。

私は困惑しています。なぜこのように機能し、削除して再度追加しないのですか? リセットクラスを作成しようとさえしました（もう一度簡略化しました）：

.reset_transform(){
    transform: none;
}

そしてjQueryで私は次のようなことをしています:

$('#btn').click(function(e)){
  e.preventDefault();
  $('#some_element').removeClass('pulsate').addClass('reset_transform').addClass('pulsate');
}

しかし、ご想像のとおり、うまくいきません... 何かアイデアはありますか? ボタンをクリックするたびに要素が脈動するようにします。

4

2 に答える 2

4

これが私の問題の解決策です。@Aspiring Aqib が指摘したように、クラスの追加と削除の間に遅延が必要でした。彼は delay() jquery を使用しましたが、機能していませんでした。

これが setTimeout(); を使用した私のソリューションです。

$('#some_element').addClass('pulsate');

setTimeout(function(){
   $('#some_element').removeClass('pulsate');
}, 800);
于 2012-12-23T13:00:50.853 に答える
1

ToggleClass()初めてクリックしたときにクラスが追加され、アニメーションが再生されたため、機能しませんでした。2 回目にクリックするとそのクラスが削除され、今回はクラスが削除されたため、アニメーションが再生されません。3 回目は、1 回目と同じように機能し、このプロセスが続行されます :/

$('#btn').click(function(e)){

    e.preventDefault();

    $('#some_element').addClass('pulse').delay(200).removeClass('pulse');
}

上記のコードが機能するとは思いません! :)

于 2012-12-23T11:50:03.993 に答える