使用requestAnimationFrame

Question

我正在使用这个函数来设置一些元素的变换属性，但是动画在火狐中不是那么平滑，当窗口更大时(在任何浏览器中)它都不那么平滑。.I在博客上读到了很多东西，他们说我可以使用requestAnimationFrame制作更平滑的动画，但我不明白如何在我的function.Can中实现它有人能解释我如何在我的函数中使用它吗？

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));

您可能还需要一个外部变量进行检查，以了解何时停止动画。