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

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

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

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

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

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

Благодарю вас!