使用requestAnimationFrame

Question

我正在使用此功能设置某些元素的transform属性，但是在firefox中动画不是那么平滑，并且当窗口大小更大时（在任何浏览器中）动画的平滑度都不太平滑。我在博客上阅读了很多内容说我可以使用requestAnimationFrame制作更流畅的动画，但是我不明白如何在函数内部实现动画。有人可以解释一下如何在函数内部使用动画吗？

function sectionMovement(delay,section) {
  setTimeout(function () {
    var val = ((v.sectionIndex + 1) > v.leavingSection) ?
      val = 100 : 
      val = 0;
    document.getElementById("sec_"+section+"").style.transform = "translateY(-"+val+"%)"
  }, delay);
};

Answer 1

像这样：

function updateSection(selector) {
  var elem = document.getElementById("sec_" + section);
  return function step() {
    var val = ((v.sectionIndex + 1) > v.leavingSection) ? // not sure what 'v' is?
      100 : 
      0;

    elem.style.transform = "translateY(-"+val+"%)";
    requestAnimationFrame(step);
  }
}

var sel = "myElementId";
requestAnimationFrame(updateSection(sel));

您可能还希望检查外部变量以知道何时停止动画。