在translate3d之后获得div位置 [英] Get divs position after translate3d

问题描述

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

In Javascript, when I move an element using the gpu via the translate3d method, the elements style-left position doesnt change at all. As the cpu isnt even aware any motion has occurred.

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

How do I track what the new position of an element is, after moving it via translate3d?

推荐答案

使用 Element.getBoundingClientRect（） 获取元素坐标

Use Element.getBoundingClientRect() to get the element coordinates

这里是只是一个从CSS3翻译（动画）元素中检索 .left Rect 属性的小例子：

Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element:

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>

这篇关于在translate3d之后获得div位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！