在translate3d之后獲得div位置

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

使用getBoundingClientRect的其他答案有效，但如果要從translate3d字符串中獲取實際數值，請使用RegExp ：

var xyzArray;
let translate3dValue = 'translate3d(256px, 512px, 0px)';
xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');