加载文档时完成CSS3动画

Question

我从一开始就运行以下无限动画作为页面加载器：

@-webkit-keyframes spinX {
    100% {
        -webkit-transform:rotate(360deg);
    }
}

在窗口加载时，我运行以下JS：

window.onload = function(){
    var _logo_x = document.getElementById("logo-x");
    _logo_x.addEventListener("animationiteration", introLogo(_logo_x), false);
}
function introLogo(_ele)
{
  _ele.removeClass('rotate');
}

我面临的问题是它削减了当前的迭代而不是等待它。 Fiddle

Answer 1

_logo_x.addEventListener("animationiteration", introLogo(_logo_x), false);

相当于：

introLogo(_logo_x);
_logo_x.addEventListener("animationiteration", undefined, false);

你想：

_logo_x.addEventListener("animationiteration", function() {introLogo(_logo_x)}, false);