检测javascript动画结束

时间:2018-06-08 14:46:53

标签: javascript html css animation

我目前正在编写像这样的动画



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(){})会做什么?具体来说,我想创建一个接收这些参数的函数。

1 个答案:

答案 0 :(得分:0)

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

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);
}

我用一个匿名函数包装它,以确保该框架具有范围引用。

另一种可能更干净且更首选的方法是将一个类应用于动画端的元素,然后监听该更改。