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

如果不手动设置，则左侧的样式属性将设置为自动。但是你应该能够使用jquery函数position（）。

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

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

Answer 3

使用>>> class MyList(list): ... def __setitem__(self, x,y): ... super(MyList, self).__setitem__(x,y**2) ... >>> ml = MyList([1,2,3,4,5]) >>> ml[2]=10 >>> ml [1, 2, 100, 4, 5]的其他答案有效，但如果您想从getBoundingClientRect字符串中获取实际数值，请使用translate3d：

RegExp

在translate3d之后获得div位置

3 个答案: