在 translate3d 之后获取 div 位置答案

【问题标题】：Get divs position after translate3d在 translate3d 之后获取 div 位置
【发布时间】：2015-04-02 10:58:45
【问题描述】：

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

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

【问题讨论】：

你不需要使用 jQuery，getBoundingClientRect 可以给你当前元素的位置，甚至通过 CSS3 转换。

标签： javascript html position translate3d

【解决方案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>

【讨论】：

顺利解决。没听说过这个功能。
谢谢。我用它来做很多事情，但没有意识到这会结束翻译工作的噩梦！
@RokoC.Buljan 不幸的是，这只适用于填充窗口宽度的元素，包裹在更多其他元素中的翻译元素显示不同的getBoundingClientRect 值。也许我们应该使用元素的 offsetLeft 值来调整？
当我使用el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft 进行快速测试时，结构更复杂，结果更准确。
@manikanta 在我的脖子后面......当您对相对于视口但相对于可滚动父元素的位置不感兴趣时，您可能需要包含其他变量...

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

在那个小提琴中，我将 rotateY 转换为 translate3d(330px,0,0) ，是的..它似乎确实有效。所以至少有一种方法，如果有一个无 jquery 的方法会更好。