requestAnimationFrame не ждет следующего кадра

Question

Спасибо за регистрацию!

Насколько я знаю (это может быть неправильно) Запрос JavaScriptAnimationFrame работает (немного), как setTimeout, за исключением того, что он не ждет определенного количества времени, но для следующего кадра, который будет отображаться.

Это может быть использовано для многих вещей, но то, что я пытаюсь достичь здесь, - это эффект затухания, основанный на CSS на основе JavaScript. Вот что код выглядит следующим объяснением:

//This line makes the element displayed as block from none 
//but at this point it has an opacity value of 0 
this.addClass('element__displayed'); 

//here i am waiting a frame so that the previously added 
//display value takes effect 
window.requestAnimationFrame(function(){ 
    //adding opacity: 1 for fade effect 
    this.addClass('element__visible'); 
}.bind(this)); 

Моя проблема в том, что даже если элемент имеет свой CSS переход установить и я жду значение на дисплее, чтобы быть оказаны, я не буду получать не переход она просто выскакивает в.

(это работает, если я использую SetTimeout (..., 1000/60), но SetTimeout является узким местом по сравнению с requestAnimationFrame)

Пожалуйста, не пытайтесь дать альтернативный решение для эффекта затухания, потому что мой вопрос не является следствием, но почему анимационная рамка не работает!

Спасибо!

Answer 1

I requestAnimationFrame не гарантирует ожидание следующего кадра. Paul Irish writes

Любые СДД очередь в обработчиков событий будет выполняться в том же кадре. Любые rAF, поставленные в очередь в rAF, будут выполнены в следующем кадре.

Если адаптировать свои демо, он работает для меня теперь Chrome: https://jsfiddle.net/ker9zpjs/

Однажды я нашел помощника, который находится в моей панели инструментов с тех пор:

var nextFrame = function(fn) { raf(function() { raf(fn); }); }; 

Но я должен признаться, что мой ответ не полностью исследован, если кто-то может найти лучшую информацию, я был бы также признателен.