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

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，因为Java语言的运行速度比页面能够呈现自身的速度要快，我试图避免这种情况。

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/