JS獲取動畫元素的當前位置

所以我有一個使用CSS3過渡元素來移動頁面。我試圖看看頁面上該動畫的實際輸出FPS是如何的（例如，如果頁面以5FPS輸出，則從0px移動到10px的div在過渡值1s時應該報告2px，4px， 6px等）。JS獲取動畫元素的當前位置

相反，我只是得到了我已經設置div的位置的任何值。

// css has defined a transition of 10s on the moving div 
document.getElementById("movingDiv").style.left = "0px"; 
console.log(document.getElementById("movingDiv").style.left); //outputs 0px 
document.getElementById("movingDiv").style.left = "100px"; 
window.setTimeout(function(){ 
    console.log(document.getElementById("movingDiv").style.left); //outputs 100px instead of, for instance, 43px or wherever the div would visually appear to be 
}, 3000);

這並不是確切的代碼，但只是一些很通用的，足以說明我的觀點。

重述問題，我將如何找到其中元素以可視方式顯示它的一個位置，另一個之間的過渡期間要？我沒有使用jQuery動畫，因爲許多其他人已經回答了，並且不只是想計算元素應爲的位置。我想查看元素實際上在頁面上的位置。我也希望這是否也可以在屏幕外工作（如在可見窗口的左側或上方）。

爲了幫助我明白爲什麼我真的想要做到這一點，我試圖獲得頁面的FPS輸出。我已經看到很多情況下，頁面輸出可怕的FPS，但JavaScript仍然輸出超過100 FPS，因爲Javascript可以比頁面可以運行得更快，我試圖避免。

來源

2015-11-03 MineAndCraft12

您可以使用window.requestAnimationFrame：

var moving = false, 
     el = document.getElementById("mover"); 
    el.className = el.className + " move-right"; 
    el.addEventListener('transitionend', function() { 
    moving = true; 
    }); 

    function getPosition() { 
    var rect = el.getBoundingClientRect() 
    console.log(rect.top, rect.left); 
    if (!moving) { 
     window.requestAnimationFrame(getPosition); 
    } 
    } 
    window.requestAnimationFrame(getPosition);

http://jsfiddle.net/ob7kgmbk/1/

來源

2015-11-03 04:49:09 dcochran

+1快速的答案和參考驚人的功能（希望我能+10），但因爲我問一個不使用jQuery（試圖使我的項目完全基於自己的代碼，併爲其他人也可能正在尋找它），我不認爲我可以在技術上將它算作答案。但是，巨大的感謝，因爲在研究這個requestAnimationFrame之後，我發現我可以用它來進行我的FPS計數，我一直在試圖弄清楚這些年齡。不要太難，但如果你或任何人很快回答沒有注意到：''我沒有使用jQuery動畫，因爲許多人已經回答了'' – MineAndCraft12

我會替換jQuery部分 – dcochran

Welp，看起來像答案！目前無法進行測試，因爲時間很短，但標記已回答！謝謝！ – MineAndCraft12

JS獲取動畫元素的當前位置

回答

相關問題