Javascript 使用js或jquery重新启动转换效果

我正在制作一个游戏，使用与2048年类似的过渡。2048年，当玩家快速点击时，之前的转换将全部结束，然后新的转换开始

函数a（）{
//这样做不需要任何过渡
document.getElementById（“di”）.style.width=“100px”；
//通过转换来实现这一点
document.getElementById（“di”）.style.width=“300px”；
//目标：每次单击，重置宽度而不进行任何转换，然后重新开始，而不超时
}

#di{
宽度：100px；
高度：100px；
背景：红色；
过渡：宽度10s；
}

开始

所以如果使用jQuery

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

---

在CSS中没有

转换
属性。
hmm。。。我试试看。prob可以工作，但可能需要一些工作。ty tho JS解决方案