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

【问题标题】：Get new position of an element after CSS3 translate animation?CSS3翻译动画后获取元素的新位置？
【发布时间】：2012-01-31 07:21:10
【问题描述】：

我使用 CSS3 平移动画将对象移动 10 像素

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

如果最初对象位于 left=10px，那么它现在应该位于 left=20px。但是当我这样做时

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

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

【问题讨论】：

【解决方案1】：

左边的值是一样的，因为元素已经平移，没有绝对定位移动。

顺便说一句，这就是为什么它们如此高效的原因，因为浏览器可以准确地知道要重新绘制什么，因此可以轻松地进行硬件加速等，因为翻译不会影响页面上的任何其他内容。

您可以使用 WebKitCSSMatrix 检查内部使用的变换矩阵，然后将其添加到现有偏移量上，但您可能会发现检查为什么需要这样做或手动跟踪（即，如果你从 10px 开始，然后平移 15px，你现在是 25px。）

【讨论】：