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

Question

所以我有一个使用 CSS3 过渡在页面上移动的元素。我正在尝试查看页面上该动画的实际输出 FPS 是如何（例如，如果页面以 5FPS 输出，则 div 以 1s 的过渡值从 0px 移动到 10px 应该报告 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/