javascript - 在 JS 中使用 "transform: translate"只能使用一次

Question

每次单击按钮时，我都想移动一个 div。它应该总是移动相同的距离。我正在使用 JavaScript 执行此操作，但我似乎无法在第一次点击后让它正常工作。

HTML

<div id="container">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<button id="move">Click to move the square</button>

CSS

.slide {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
  margin-bottom: 10px;
  margin-right: 10px;
}

JS

document.getElementById("move").addEventListener("click", function() {
  document.getElementById("container").style.transform = "translateX(30px)"
})

我试过从事件监听器外部调用该函数，如下所示:

document.getElementById("move").addEventListener("click", clickNext);
function clickNext() {
  document.getElementById("container").style.transform = "translateX(30px)"
}

我还尝试通过带有“onclick”属性的 HTML 来处理点击事件:

HTML

<button id="move" onclick="clickNext()">Click to move the square</button>

JS

function clickNext() {
  document.getElementById("container").style.transform = "translateX(-100px)"
}

在这些代码位的每一个中，按钮都按预期工作，但只有一次。之后，按钮停止工作。

如能提供任何关于为什么会发生这种情况的帮助，我们将不胜感激。

Answer 1

由于在第二次点击时分配的 style 属性没有变化，因此没有 animation

试试这个:

var amount = 30;
var initial = 0;
document.getElementById("move").addEventListener("click", function() {
  initial += amount;
  document.getElementById("container").style.transform = "translateX(" + initial + "px)"
})

.slide {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
  margin-bottom: 10px;
  margin-right: 10px;
}

<div id="container">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<button id="move">Click to move the square</button>