Question

所以我有一个使用CSS3过渡的元素在页面上移动。我试图看看页面上该动画的实际输出FPS是如何的（例如，如果页面输出为5FPS，则div从0px移动到10px，转换值为1s时应报告2px， 4px，6px等）。

相反，我只是得到了我已经设定div的位置的任何价值。

// css has defined a transition of 10s on the moving div
document.getElementById("movingDiv").style.left = "0px";
console.log(document.getElementById("movingDiv").style.left); //outputs 0px
document.getElementById("movingDiv").style.left = "100px";
window.setTimeout(function(){
    console.log(document.getElementById("movingDiv").style.left); //outputs 100px instead of, for instance, 43px or wherever the div would visually appear to be
}, 3000);

这不是确切的代码，只是一些非常通用的代码来说明我的观点。

重述问题如何在一个位置与另一个位置之间转换过程中如何找到元素在视觉上看起来的位置？我没有使用jQuery动画正如许多其他人已经回答的那样，并且不想只计算元素应该的位置。我想看看元素实际上出现在页面上的位置。我也想，如果这也在屏幕外工作（比如在可见窗口的左上方或上方）。

为了帮助我了解为什么我真的想要这样做，我是否正在尝试获取页面的FPS输出。我已经看到很多情况下页面输出可怕的FPS但Javascript仍然输出超过100 FPS，因为Javascript运行速度比页面可以渲染的速度快，我试图避免。

Answer 1

您可以使用window.requestAnimationFrame：

  var moving = false,
      el = document.getElementById("mover");
  el.className = el.className + " move-right";
  el.addEventListener('transitionend', function () {
    moving = true;
  });

  function getPosition() {
    var rect = el.getBoundingClientRect()
    console.log(rect.top, rect.left);
    if (!moving) {
      window.requestAnimationFrame(getPosition);
    }
  }
  window.requestAnimationFrame(getPosition);

http://jsfiddle.net/ob7kgmbk/1/

JS获取动画元素的当前位置

1 个答案: