javascript连续添加属性时CSS过渡不起作用

Question

以下是我的网站存在的问题的简化版本。

 function move(){ document.getElementById("box").style.transition = "0s"; document.getElementById("box").style.top = "100px"; document.getElementById("box").style.transition = "2s"; document.getElementById("box").style.top = "0px"; } 

 #box{ width:100px; height:100px; background:red; position:relative; top:0px; } 

 <div id="box" onclick="move()"></div> 

我想要做的是使盒子立即向下跳，然后慢慢移回其初始位置。 我已经分别测试了move()四行代码中的每一行，它们完美地工作了。 我只是不能让他们一口气跑。

我究竟做错了什么？

Answer 1

似乎代码需要延迟才能分配导致浏览器可以处理请求的新属性。 因此，您需要使用setTimeout()解决此问题。

 function move(){ document.getElementById("box").style.transition = "0s"; document.getElementById("box").style.top = "100px"; setTimeout(function(){ document.getElementById("box").style.transition = "2s"; document.getElementById("box").style.top = "0px"; }, 10); } 

 #box{ width:100px; height:100px; background:red; position:relative; top:0px; } 

 <div id="box" onclick="move()"></div> 

Answer 2

与其依赖转换，不如使用@keyframes和animation更好，这样您就不必使用肮脏的技巧，例如将转换持续时间从0更改为动画中的实际值来实现跳跃。 以下是利用@keyframes CSS功能的示例：

 function move(){ document.getElementById("box").style.animation = "movement 2s"; } 

 #box{ width:100px; height:100px; background:red; position:relative; top:0px; } @keyframes movement { from {top: 100px;} to {top: 0px;} } 

 <div id="box" onclick="move()"></div>