Question

我正在尝试使用纯JavaScript为加号（+）设置动画，但在单击按钮时将其向上移动。

单击该按钮时，加号向上移动约100px，动画结束。我想这样做，以便在动画结束时，另一个函数将加号恢复回原来的位置，这样如果再次点击该按钮，动画就会回复。

我不能使用jQuery，否则它会更容易。

cool.onclick = function() {
  let start = Date.now();

  let timer = setInterval(function() {
    let timePassed = Date.now() - start;

    train.style.top = timePassed / -3 + 'px';

    if (timePassed > 300) clearInterval(timer);


  }, 1);

  /////////////////
  //code to return the + sign back to its original position fayded
  ////////////////
}

#train {
  position: relative;
  cursor: pointer;
}

#cool {
  position: relative;
  cursor: pointer;
  border: 1px solid red;
  width: 100px;
  text-align: center;
}

<div style="height:200px; width:100%;"></div>
<div id="cool">BUTTON</div>
<div id="train">+</div>

Answer 1

当然，这样做的方法是使用CSS。使用translateY动画。但是如果你真的想用Javascript来做，你的代码看起来会更像这样：

<script>
    var PositionOffset = 0;
    var PositionIncrement = 1;
    var timer;
    cool.onclick = function() {
        train = document.getElementById("train");
        PositionIncrement = 1;
        clearInterval(timer);
        timer = setInterval(function() {
            PositionOffset = PositionOffset + PositionIncrement;
            train.style.top = PositionOffset + 'px';
            if (PositionOffset >= 100) {
                PositionIncrement = -1;
            }
            if (PositionIncrement == -1 && PositionOffset <= 0) {
                PositionOffset = 0;
                clearInterval(timer);
            }
        }, 10);
        timer.Start();
    }
</script>

请注意，此代码上下移动，通过在单击按钮时（在onclick函数开始时）将增量更改为+1，并在窗口小部件到达顶部时将-1更改为-1，然后停止当位置向下（增量为-1）并且位置偏移达到零时，计时器。

请注意，当用户单击该按钮时，即使+号位于中途或已经回落，它也会再次开始重新启动。到达顶部，然后向后退。

我将间隔设置为10毫秒，这意味着通过在计时器的每个刻度上增加1个像素的位置，它将在1秒内上升100个像素（100px * 10毫秒/ px = 1秒）。如果您希望动画更快或更慢，只需更改间隔时间。

此外，您试图在train中使用名为train.style.top = ...的变量，但您从未设置过。您只需调用document.getElementById即可使用javascript来获取具有该ID的div。

您可能还有其他问题，（例如，为了更改顶部工作，您必须将您的火车div的样式设置为具有绝对位置），但这应该让您更接近。

查看this fiddle。

Javascript基本动画问题

1 个答案: