Javascript CSS3 Listener 未被 webkit 捕获*结束

Question

我正在尝试捕捉以 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;}
}

Answer 1

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

应该是

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

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