Javascript 如何检测css3转换何时结束
我正在学习javascript和css3游戏,我正在开发一款外星人游戏。这个游戏是一个猜谜游戏,你输入一个X和Y位置的猜测,导弹通过css3转换向外星人移动。当导弹到达外星时,爆炸应该出现;但我很难察觉过渡何时结束。目前,当你猜测X和Y,导弹起飞时,爆炸就出现了。当css3转换结束时,如何使用Javascript进行检测,以使爆炸发生 以下是我目前拥有的: 样式表:Javascript 如何检测css3转换何时结束,javascript,css,Javascript,Css,我正在学习javascript和css3游戏,我正在开发一款外星人游戏。这个游戏是一个猜谜游戏,你输入一个X和Y位置的猜测,导弹通过css3转换向外星人移动。当导弹到达外星时,爆炸应该出现;但我很难察觉过渡何时结束。目前,当你猜测X和Y,导弹起飞时,爆炸就出现了。当css3转换结束时,如何使用Javascript进行检测,以使爆炸发生 以下是我目前拥有的: 样式表: #explosion { width: 20px; height: 20px; position: absolute;
#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();
}
}
if(guessX>=alienX&&guessX=alienY&&guessY使用事件检测转换何时完成。transitionend
事件
文件:
演示:我使用以下内容,可在此处找到:
可能重复的
$('div').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
// do something
});