javascript – 在translate3d之后获取div位置

发布时间：2020-12-14 23:20:50 所属栏目：资源来源：网络整理

导读：在Javascript中,当我通过translate3d方法使用gpu移动元素时,元素样式左侧位置根本不会改变.因为cpu甚至不知道发生了任何动作. 在通过translate3d移动元素后,如何跟踪元素的新位置？最佳答案使用 Element.getBoundingClientRect() 获取元素坐标这里只是一

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

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

最佳答案

使用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); }}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!