動畫結束監聽器無法正常工作

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