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

我使用以下内容：https://stackoverflow.com/a/13862291/2312574

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

Answer 2

使用transitionend事件检测转换何时结束。

Answer 3

transitionend事件。

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

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

如何检测css3转换何时结束

3 个答案: