javascript - 重复设置translate3d(10px，0,0)不会将div反复向右移动。如何使其运作？

我知道如何使用顶部/左侧位置增量移动div元素。但是我听说translate3d可以提高性能，所以我想检查一下。

可以说我有这个

var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'red';
div.style.position = 'absolute';
document.body.appendChild(div);

下列，

div.getBoundingClientRect().left

给出值8。

现在，打电话

div.style.transform = 'translate3d(10px,0,0)'

如预期的那样，将元素向右移动10px

div.getBoundingClientRect().left

给出值18。

但是反复执行

div.style.transform = 'translate3d(10px, 0, 0)';

不会将div反复向右移动。相反，我必须将translate3d的第一个参数增加到更高的值（例如20、30等）以重复移动它。

这使我认为翻译是从某个初始点算起的。但是在谷歌上搜索，我找不到如何更新此初始点，因此translate3d(10px, 0, 0)可以循环工作。

我尝试更新div.style.left属性，但仍然无法正常工作。

有人可以告诉我translate3d如何计算翻译吗？如果有一种方法可以使用translate3d(10px,0,0)和一些原点重置，使div重复移动？

（最终目标是使用translate3d使div在每次单击时都向右移动）

最佳答案

在执行div.style.transform = 'translate3d(10px, 0, 0)';时，您只是删除transform值以将其替换为另一个值，因此您的元素将保持相同的位置。如果要使用translate3d移动元素，则可以使用变量并将其每个click递增：

var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'red';
div.style.position = 'absolute';
document.body.appendChild(div);

var leftValue = 0;
var increment = 10;

var button = document.querySelector('button');

button.addEventListener('click', function(event) {
  leftValue += increment;
  div.style.transform = 'translate3d('+leftValue+'px,0,0)';
})

<button>Move</button>

对于多个元素，请使用getBoundingClientRect().left

在计算新的偏移量时，我们必须考虑元素的初始位置，否则新值将是错误的。 The problem can be see here。

为了避免这种情况，我们可以存储元素的初始位置，然后在计算新的偏移量时减去该值：

var increment = 10;
var moveBoxes = document.getElementsByClassName('moveBox');

Array.from(moveBoxes).forEach(function(box) {
  var initialOffset = getComputedStyle(box).getPropertyValue('left').replace('px', '');

  box.addEventListener('click', function(event) {
    var offset = this.getBoundingClientRect().left - initialOffset + increment;
    this.style.transform = 'translate3d('+offset+'px,0,0)';
  });
});

.moveBox {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

<div class="moveBox" style="left: 32px;"></div>
<div class="moveBox" style="top: 120px; left: 100px;"></div>

使用forEach loop代替经典的for loop，让我们将正确的initialOffset值存储在每个listeners（there are some others ways to achieve this）中。由于div的数组是HTML collection，因此必须使用Array.from才能使用forEach。

关于javascript - 重复设置translate3d(10px，0,0)不会将div反复向右移动。如何使其运作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53910620/