使用“;transform:翻译“;与JS只工作一次

Using "transform: translate" with JS only works once

本文关键字：一次 工作 JS transform 翻译 使用      更新时间：2023-09-26

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

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

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

由于第二次点击时分配的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>

相关文章：