using requestAnimationFrame

Question

我使用這個函數來設置一些元素的轉換屬性，但是在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)); 

您也可能會需要一個外部變量來覈對來判斷何時停止動畫。