使用js或jquery重启转场效果

Restart transition effect using js or jquery

我正在制作一款使用类似于 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 动画,但在实际场景中,它们不起作用

所以如果使用 jQuery,

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

并且 CSS 中没有 transition 属性。