获得translate3d后的divs位置

Question

在Javascript中，当我通过translate3d方法使用gpu移动元素时，元素样式-左的位置根本不会改变。由于cpu甚至不知道任何运动已经发生。

在通过translate3d移动元素之后，如何跟踪元素的新位置？

Answer 1

使用Element.getBoundingClientRect()获取元素坐标

下面是一个小示例，它从已翻译(动画)元素的.left中检索CSS3 Rect属性：

​

const box = document.getElementById('box');
const printer = document.getElementById('printer');
const printBoxRectLeft = () => {
  printer.textContent = box.getBoundingClientRect().left;
  requestAnimationFrame(printBoxRectLeft);
};

printBoxRectLeft();

#box{
  width:30px; height:30px; background:red;
  animation: animX 3s infinite alternate;
}
@keyframes animX { to{ transform:translateX(300px); }}

<div id="printer"></div>
<div id="box"></div>

​

Answer 2

如果不手动设置样式属性左侧，则设置为auto。但是您应该能够使用jquery函数位置()。

    var position = $('#element').position();
    var left = position.left;

http://jsfiddle.net/nqab2aw7/2/

Answer 3

在大多数情况下，使用getBoundingClientRect的其他答案都是有效的，但它是从视口计算的，而不是DOM的实际0、0。因此，如果父元素具有负的同弦，并且不显示屏幕，getBoundingClientRect将返回错误的坐标。

它还忽略了margin、padding和borderWidth，因此如果您需要非常精确地：

trueLeft = rect.left - margin.left - padding.left - borderWidth - offsetX

要获得其他值，可以使用RegExp

'translate3d(256px, 512px, 0px)'.replace(/translate3d|px|\(|\)/gi, '').split(',');

// { x: trueLeft, y: translate3d[1], z: translate3d[2] }