我使用 CSS3 翻译动画将对象移动 10 像素
@-webkit-keyframes move{
0% {}
100% {
-webkit-transform: translate(10px);
}
}
如果最初对象在 left=10px,那么它现在应该在 left=20px。但是当我这样做的时候
document.getElementById("obj").style.left
即使在动画之后,它也会返回值 10px。如何使用 javascript 获取新值?最好是没有 jQuery 或任何其他框架的答案:)
最佳答案
左边的值是一样的,因为元素已经平移,没有用绝对定位移动。
顺便说一句,这就是它们如此高效的原因,因为浏览器可以准确判断要重绘的内容,因此可以轻松地进行硬件加速等,因为翻译不会影响页面上的任何其他内容。
您可以使用 WebKitCSSMatrix 检查内部使用的变换矩阵,然后将其添加到现有偏移量上,但您可能会发现检查为什么需要这样做或手动跟踪(即如果你从 10px 开始,然后平移 15px,你现在是 25px。)
关于javascript - 在 CSS3 翻译动画后获取元素的新位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8692169/