在 JS 中使用“transform: translate”只能工作一次答案

【问题标题】：Using "transform: translate" with JS only works once在 JS 中使用“transform: translate”只能工作一次
【发布时间】：2016-01-04 10:13:33
【问题描述】：

每次单击按钮时，我都想移动一个 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;
}

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>

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

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

任何关于为什么会发生这种情况的帮助将不胜感激。

【问题讨论】：

标签： javascript events onclick listener transform

【解决方案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>

【讨论】：