Question

我正在制作一款使用与2048类似过渡的游戏。在2048年，当玩家的垃圾邮件快速点击时，以前的过渡将全部终止，然后新的过渡开始。

function a(){
  //do this without any transition
  document.getElementById("di").style.width = "100px";
  //do this with transition
  document.getElementById("di").style.width = "300px";
  //goal: every click, reset the width without any transition and start again, without timeouts
}

#di {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 10s;
}

<h1 id="qwe" onclick="a()">Start</h1>

<div id="di"></div>

函数a（）中的注释告诉您我想要什么。基本上，我希望矩形立即回到100px，然后再次开始过渡。

我不希望有任何超时，因为实际情况要复杂得多，并且不能有延迟

我也知道css动画，但是在实际情况下，它们是行不通的

Answer 1

因此，如果使用jQuery，

function a()
{
   $("#di").css("width", "100px");
   $("#di").animate({width: "300px"});
}

，并且在CSS中没有transition属性。

使用js或jquery重新启动过渡效果

1 个答案: