javascript - 在 translate3d 之后获取 div 位置

Question

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

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

Answer 1

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

这只是一个从 CSS3 翻译（动画）元素中检索.left 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

如果您不手动设置样式属性 left 则设置为 auto。但是你应该可以使用 jquery 函数 position()。

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

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

Answer 3

使用工作的其他答案，但如果您想从字符串getBoundingClientRect中获取实际数值，请使用 a ：translate3dRegExp

var xyzArray;
let translate3dValue = 'translate3d(256px, 512px, 0px)';
xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');