Question

问题是如何让火车通过第二次点击返回初始位置。

这种情况下的动画从左边的0到400px绘制。我需要再次点击从400px到0，所以火车返回原来的位置。

为什么在这个动画中，列车在400px中并不总是重要，以及我们在使用此功能时如何实现准确性。

＆＃13;

train.onclick = function() {
  var start = Date.now(); // сохранить время начала

  var timer = setInterval(function() {
    // вычислить сколько времени прошло из opts.duration
    var timePassed = Date.now() - start;

    train.style.left = timePassed / 5 + 'px';

    if (timePassed > 2000) clearInterval(timer);

  }, 20);
}

＆＃13;

#train {
  position: relative;
  cursor: pointer;
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <img id="train" src="https://js.cx/clipart/train.gif">
</body>
</html>

＆＃13;

Answer 1

关于新CSS规范的最好的事情是你可以将所有这些东西留给CSS并纯粹使用JavaScript进行交互。例如，最好的方法是：

document.getElementById("train").onclick = function() {
  this.classList.toggle("end");
}

以上是您需要的唯一JavaScript。休息所有魔法都是由CSS完成的。关于这一点的好处是，它使用 GPU ，这比CPU更有效。请参阅代码段：

document.getElementById("train").onclick = function() {
  this.classList.toggle("end");
}

#train {
  position: relative;
  left: 0;
  cursor: pointer;
  -webkit-transition: left 2s; /* Safari */
  transition: left 2s;
}
#train.end {
  left: 400px;
}

<img id="train" src="https://js.cx/clipart/train.gif" />

有关浏览器支持，请参阅Can I use?

Answer 2

我修改了你的代码，下面的代码效果很好：

window.onload = function() {
var train = document.getElementById("train");
var isLeftToRight = 0;
var startPosition = 0;

train.onclick = function() {
    isLeftToRight = 1 - isLeftToRight;
    var start = Date.now(); // сохранить время начала

    var timer = setInterval(function() {
    // вычислить сколько времени прошло из opts.duration
    var timePassed = Date.now() - start;
    if(isLeftToRight) train.style.left = timePassed / 5 + 'px';
    else train.style.left = (startPosition - timePassed / 5) + 'px';

    if (timePassed > 2000) {
        clearInterval(timer);
        startPosition = timePassed / 5;
    }
  }, 20);
}

在JavaScript中使用setInterval进行动画制作

2 个答案: