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>

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

2 个答案: