css转换的可选promise(）函数

alternative promise() function for css transitions

本文关键字：函数 promise 转换 css      更新时间：2023-09-26

我制作了一个带有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个动画时进行回调。

有其他方法可以做到这一点吗？

查看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
    }
  }
}
相关文章：