translate3d后获取div位置

Question

在Javascript中，当我通过translate3d方法使用gpu移动一个元素时，元素style-left位置根本没有改变。由于 cpu 甚至不知道发生了任何动作。

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

Answer 1

如果您不手动设置，左侧的样式属性将设置为自动。但是你应该可以使用 jquery 函数 position().

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

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

Answer 2

使用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 3

使用 getBoundingClientRect 的其他答案有效，但如果您想从 translate3d 字符串中获取实际数值，请使用 RegExp:

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

translate3d后获取div位置

Get divs position after translate3d

html

javascript

position

translate3d