使用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
属性。
我正在制作一款使用类似于 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
属性。