在CSS3翻译动画后获取元素的新位置？

Question

我使用CSS3翻译动画来移动一个对象10px

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

如果最初对象在左边= 10px,那么它现在应该在左边= 20px.但是,当我这样做

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

即使在动画之后它也会返回10px的值.如何使用javascript获取新值？最好没有jQuery或任何其他框架的答案:)

Answer 1

左边的值是相同的,因为元素已被翻译,而不是使用绝对定位移动.

顺便说一句,这就是为什么这些是如此高效,因为浏览器能确切说出重画,所以它可以很容易地硬件加速等,作为翻译不影响任何网页上的其他人.

您可以使用WebKitCSSMatrix检查内部使用的转换矩阵,然后将其添加到现有偏移量上,但您可能会发现更直接地检查您需要执行此操作的原因,或者手动跟踪(即如果您是从10px,然后翻译15px,你现在是25px.)