在JS中使用“transform:translate”只能使用一次

时间:2016-01-04 10:13:34

标签: javascript events onclick listener transform

每次点击按钮,我都会移动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)"
}

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

对于为什么会发生这种情况的任何帮助都会非常感激。

1 个答案:

答案 0 :(得分: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>