1

アニメーション化されている8*8 div要素を使用してゲームを作成しました。現在、JQueryのアニメーション関数を使用しています。

アニメーションが開始する関数を呼び出すと、次のコードを使用して、アニメーションがすべて停止したかどうかを確認します。

function start_animation()
{
  //the animations start here
  $("div").promise().done(function() {
     //here comes the code for when the animations stoped
  }
}

ここで、cssトランジションを使用してアニメーションを実行したいのですが、すべてのアニメーションが完了したかどうかを確認するための解決策が見つかりません。

私は試した：

$("div").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

ただし、これにより、1つのアニメーションが実行されるたびにコールバックが発生します。

これを達成する別の方法はありますか？

4

1 に答える 1

1

promise関数の機能を確認してください https://github.com/jquery/jquery/blob/master/src/queue.js#L119。同様のコードを使用する必要がありますresolveが、アニメーション キューにフックするのではなく、イベント ハンドラーとしてバインドします。

要するに：

function start_animation() {
  var divs = $("div");
  // the animations start here

  var count = divs.length;
  // using `.one` automatically unbinds the handler
  divs.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    if ( --count == 0) {
      // here comes the code for when all the animations stoped
    }
  }
}
于 2013-02-08T14:07:16.063 に答える