如何檢測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過渡事件（的