如何检测css3转换何时结束

Question

我正在学习javascript和css3游戏，我正在研究外星人游戏。游戏是一种猜谜游戏，您可以输入X和Y位置的猜测，并使用css3过渡导弹向外星人移动。当导弹到达外星人时，爆炸应该出现;但我很难检测转换何时结束。目前，当你猜测X和Y并且导弹起飞时，爆炸显现正确。当css3转换结束以使爆炸出现时，如何使用Javascript检测？

这是我目前有：

样式表：

#explosion 
{ 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    display: none; 
    background-image: url(../images/explosion.jpg); 
} 

#alien 
{ 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    top: 20px; 
    left: 80px; 
    background-image: url(../images/alien.jpg); 
} 

#missile 
{ 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    top: 240px; 
    left: 145px; 
    background-image: url(../images/missile.jpg); 
    /*Transition*/ 
    -webkit-transition: all 0.5s ease-out 0s; 
    -moz-transition: all 0.5s ease-out 0s; 
    transition: all 0.5s ease-out 0s; 
} 

和JavaScript：

if(guessX >= alienX && guessX <= alienX + 20) 
{ 
    //Yes, it's within the X range, so now let's 
    //check the Y range 
    if(guessY >= alienY && guessY <= alienY + 20) 
    { 
    //It's in both the X and Y range, so it's a hit! 
    gameWon = true; 
//move missle towards alien 

//make explosion appear 
explosion.style.top = alienY + "px"; 
explosion.style.left = alienX + "px"; 
explosion.style.display = "block"; 

    endGame(); 
} 
} 

Answer 1

使用transitionend事件，当过渡完成检测。

Answer 2

transitionend事件。

文档：http://www.w3.org/TR/css3-transitions/#transition-events

演示：http://jsfiddle.net/c937L/

Answer 3

我用下面，在这里找到：https://stackoverflow.com/a/13862291/2312574

$('div').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() { 
    // do something 
}); 

[CSS3过渡事件（的