在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

回答