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

Вы также, вероятно, хотите, внешняя переменная, чтобы проверить против того, чтобы знать, когда остановить анимацию.