requestAnimationFrame vs settimeout 0 для анимации display:none

Пытаюсь сделать анимационные переходы как во Vue.js для блока с display:none

То-есть сначала блоку добавляется display, на следующем кадре должна начаться анимация, после transitionend все классы удаляются.

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

Кто знает в чем разница между requestAnimationFrame и setTimeout 0? И есть ли смысл использовать requestAnimationFrame для подобных целей?

Пример с requestAnimationFrame (Работает не всегда корректно).

Пример рабочего кода с setTimeout

HTML

<button id=btn1>Нажми</button>
<div id="con1" style="display: none;">Контент</div>

JS

var btn = document.getElementById('btn1');
var con = document.getElementById('con1');
var show = false;
btn.addEventListener('click', function(e) {
    if (!show) {
        con.classList.add('fade-enter');
        con.classList.add('fade-enter-active');
        con.style.display = "";
        setTimeout(function() {
            con.classList.remove('fade-enter');
            con.classList.add('fade-enter-to');
            con.addEventListener('transitionend', function n(e) {
                con.classList.remove('fade-enter-active');
                con.classList.remove('fade-enter-to');
                con.removeEventListener('transitionend', n);
            });
        }, 0)
    } else {
        con.classList.add('fade-leave');
        con.classList.add('fade-leave-active');
        setTimeout(function() {
            con.classList.remove('fade-leave');
            con.classList.add('fade-leave-to');
            con.addEventListener('transitionend', function n(e) {
                con.classList.remove('fade-leave-active');
                con.classList.remove('fade-leave-to');
                con.style.display = "none"
                con.removeEventListener('transitionend', n);
            });
        }, 0)
    }
    show = !show;
});

CSS

.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
#con1 {
    width: 300px;
    height: 300px;
    background-color: #ddd;
}