在translate3d之后获得div位置

问题描述

在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?

推荐答案

使用获取元素坐标

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位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！