检测javascript动画结束

Question

我目前正在写这样的动画

function animate(element, angle, x, y){
var id = setInterval(frame, 5);

  function frame() {
      if (/* test for finished */) {
          clearInterval(id);
      } else {
          /* change element style */ 
      }
    }
}

我不能做addEventListener("animationend", function(e){...})，因为它不是 css 动画，所以我将如何做类似的事情来检测特定元素上的动画结束并在它之后运行不同的函数，如 addEventListener("animationend" , function(){}) 会做什么？具体来说，我想创建一个接收这些参数的函数。

Answer 1

我想到的最简单的方法，不一定是最好的方法，就是提供一个回调函数。

function animate(element, angle, x, y, callbackFunction){
  (function(callback){
    var id = setInterval(frame, 5);
    function frame(){
      if (test for finished) {
        clearInterval(id);
        callback();
      } else { ... }
  })(callbackFunction);
}

我用一个匿名函数包装了它，以确保该框架将具有对它的范围引用。

另一种可能更简洁且更受欢迎的替代方法是在动画结束时将一个类应用于元素，然后监听该更改。