javascript - 加载文档时完成 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);