0

我正在尝试捕捉以 javascript 结尾的 CSS 效果。但由于某种原因，eventListener 没有捕捉到任何东西。具体来说，当类 phoneQueue 类的 css 效果完成时，我希望 javascript 在完成时捕获事件。我已经尝试过 webkitTransformEnd、webkitTransitionEnd 和 webkitAnimationEnd，但无法触发事件。为什么事件（无论我尝试哪个）没有被抓住？

function rotateLists() {
    var eventType =  "webkitTransformEnd";
    document.addEventListener("eventType", function () { alert("hi"); }, false);
    var phone = document.getElementById("phoneQueue");
    var chat = document.getElementById("chatQueue");
    phone.classList.add("phoneQueueOff");
    setTimeout(function () {  
        chat.classList.toggle("visible"); 

        chat.classList.add("chatQueueOn") }, 2000);

}

CSS3：

.phoneQueueOff, .chatQueueOff {
    -webkit-transform: rotateY(60deg);
    -webkit-transition-duration: 2s;
}

.phoneQueueOn, .chatQueueOn {
    -webkit-animation: spinY 2s;
}

@-webkit-keyframes spinY
{
    0%   {-webkit-transform: rotateY(90deg); -webkit-transform-origin: 0% 0% 5;}
    100% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
}
4

1 回答 1

1 
document.addEventListener("eventType", function () { alert("hi"); }, false);

应该

document.addEventListener(eventType, function () { alert("hi"); }, false);

因为eventType是一个变量，而不是一个事件的名称。

于 2013-10-18T15:00:14.400 回答