在CSS3翻譯動畫之後獲取元素的新位置？

我使用CSS3轉換動畫通過移動對象的發言權10px的在CSS3翻譯動畫之後獲取元素的新位置？

@-webkit-keyframes move{ 
    0% {} 
100% { 
    -webkit-transform: translate(10px); 
    } 
}

如果最初的目標是在左邊= 10px的，那麼現在應該是在左= 20像素。但是，當我做

document.getElementById("obj").style.left

它甚至在動畫後返回給我值10px。如何使用JavaScript獲取新值？最好是沒有jQuery或任何其他框架的答案:)

2012-01-01 eku

可能的重複http://stackoverflow.com/questions/4975727/how-do-i-get-the-position-of-一個元件型後CSS3翻譯式的JavaScript – 2012-01-01 07:03:06

左邊的值是相同的，因爲元素已經被翻譯過，沒有用絕對定位移動。另外，這就是爲什麼這些效率非常高，因爲瀏覽器可以準確地確定要重新繪製什麼，所以它可以很容易地硬件加速等，因爲翻譯不會影響頁面上的任何其他內容。

您可以檢查使用WebKitCSSMatrix在內部使用的變換矩陣，然後將其添加到現有的偏移量上，但您可能會發現它更直接，可以檢查爲什麼需要執行此操作或手動跟蹤（即如果您是以10px開頭，那麼翻譯爲15px，則您現在爲25px。）

2012-01-01 13:32:41

回答