1

アプリで Twitter ブートストラップを使用しています。アイコンを 20 秒ごとにアニメーション化する必要があります。

これが私が持っているコードです。そのコーヒースクリプトです。しかし、これは非常に基本的なものであり、JavaScript に簡単に関連付けることができます。

@updateCountIndicator = () ->
  data = Math.floor (Math.random() * 10) + 1
  countIndicator = $("#count-indicator")
  countIcon = $("#count-icon")
  countIcon.removeClass("icon-animated-vertical")
  countIndicator.html data
  countIcon.toggleClass "icon-animated-vertical"
  timedCountUpdate()

@timedCountUpdate = () ->
  setTimeout(updateCountIndicator, 20000)

問題は、アイコンが最初にアニメーション化されることです (ページの更新後 20 秒)。しかし、その後はアニメーション化されません。ブレークポイントを使用してデバッグすると、正しく動作します。私はここで何か間違っていますか？

4

1 に答える 1

3

私は（最終的に）問題を見たと思います。あなたのフィドルを見てみましょう：

$(document).ready(function(){
    setTimeout(animateIcon, 20000);
});

function animateIcon() {
    $("#change-color").addClass("animate-color");
    setTimeout(animateIcon, 20000);
}

そしてそこから行きます。animateIconが呼び出されるたびに、次のようになります。

$("#change-color").addClass("animate-color");

ただし、#change-color既にanimate-colorクラスがある場合は何もしないため、animate-colorアニメーションは 1 回しか表示されません。これにより、次の CoffeeScript バージョンを試すことができます。

animateIcon = ->
    $('#change-color').removeClass('animate-color')
    $('#change-color').addClass('animate-color')
    setTimeout(animateIcon, 20000)
$(animateIcon)

クラスを再追加しanimate-colorて CSS アニメーションを再トリガーする必要があるように見えますが、そうではありません。なぜだめですか？2 回目のanimateIcon実行で#change-colorはanimate-color、関数の先頭にありanimate-color、ブラウザーが再び制御を取得したときに最後に表示されます。のクラスは#change-color変更されていない (つまり、前後で同じクラスを持つ) ため、何も起こりません。

この問題を回避するには、クラスが実際に変更されたとブラウザーに認識させる必要があります。これを実現する 1 つの方法は次のとおりです。

  1. のクラスと色をリセットします#change-color。
  2. コントロールをブラウザに戻します。
  3. を追加しanimate-colorます。
  4. タイマーを再起動します。
  5. コントロールをブラウザに戻します。

では、制御をブラウザーに戻すにはどうすればよいでしょうか。呼び出しは、そのsetTimeout(..., 0)ための一般的なトリックです。上記を CoffeeScript に変換すると、次のようになります。

addClassAndRestart = ->
    $('#change-color').addClass('animate-color')
    setTimeout(animateIcon, 20000)
animateIcon = ->
    $('#change-color').removeClass('animate-color').css('background', 'transparent')
    setTimeout(addClassAndRestart, 0)
$(animateIcon)

.css('background', 'transparent')必要な場合とそうでない場合がありますが、それが最初にある#change-colorので追加しました。

デモ: http://jsfiddle.net/ambiguous/BByJD/

遅れて申し訳ありません、私はこの質問を見失いました。

于 2013-08-24T02:59:58.327 に答える