在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); }}
Box">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。