javascript - 动画结束监听器无法正常工作

Question

我的时间栏有一个 CSS 动画，带有 id="progress-bar" 和动画类 .anim。 动画是 CSS:

@-webkit-keyframes myfirst {
  from {
    width: 100%;
    background-color: #86e01e;
  }
  to {
    width: 0%;
    background-color: #f63a0f;
  }
}

.anim {
-webkit-animation: myfirst 5s linear;
-webkit-animation-fill-mode: forwards;
}

我正在使用函数 reset() 重新启动动画

function reset() {
document.getElementById("progress-bar").className = "";
setTimeout(function(){document.getElementById("progress-bar").className = "anim";},1);
}

现在我希望在动画结束时执行函数 lose()。 我也尝试过使用 animationend 监听器进行多种操作，但它对我不起作用...

var x = document.getElementById("progress-bar");
x.addEventListener('webkitAnimationEnd', function() { 
lose(); //whatever i type here doesn't work
}, false);

有什么想法吗？

Answer 1

试试这个作为修复:

x.addEventListener('animationend', lose(), false);
x.addEventListener('webkitanimationend', lose(), false);