Обратный звонок после визуализации стиля

Question

Все стили непереходного типа должны быть применены и показаны перед применением стилей перехода. Вот почему такой обратный вызов должен существовать.

demo

<button class="toggle">toggle</button> 
<div class="overlay"></div> 

.overlay { 
    width  : 400px; 
    height  : 400px; 
    background : gray; 

    display : none; 
    opacity : 0; 
    transition : opacity 0.3s ease-in-out; 
} 
.overlay.visible { 
    opacity : 1; 
} 

var overlay = $(".overlay"); 
$(".toggle").click(function() { 
    if (overlay.hasClass("visible")) { 
    overlay.removeClass("visible").one("transitionend", function() { 
     overlay.css("display", "none"); 
    }); 
    } else { 
    overlay.css("display", "block"); 
    setTimeout(function() { 
     overlay.addClass("visible"); 
    }, 0); 
    } 
}); 

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

setTimeout(function() { 
}, 0); 

Нулевой тайм-аут недостаточно для firefox. Я проверил, что на моей машине 5 miliseconds отлично работает 50/50.

Должен ли я связаться с отцами этой боли или есть какие-либо решения?

Answer 1

Да, на Firefox и IE вам нужно использовать getComputedStyle дополнительно

var el = overlay[0]; 
el.style.display = 'block'; 

// force reflow 
getComputedStyle(el).width; 

setTimeout(function() { 
    overlay.addClass("visible"); 
}, 0);