在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。）