Javascript基本动画问题

Question

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

当点击该按钮，加号大约100像素向上移动和动画结束。 我希望这样做，以便动画结束时，另一个函数将加号返回到其原始位置，这样，如果再次单击该按钮，动画就会回复。

我不能为此使用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），并且位置偏移量达到零。

请注意，当用户单击按钮时，即使+号位于中途或已经向下，也将再次开始向上。 到达顶部，然后往回走。

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

另外，您尝试在train.style.top = ...使用一个名为train变量，但从未设置。 您只需简单地调用document.getElementById即可使用javascript来获取具有该ID的div。

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

看看这个小提琴 。