Firefox animacja nie wychodząc na przełączania wyświetlacza stylu

Question

Fiddle http://jsfiddle.net/B9h8y/1/

w Chrome po kliknięciu doc ​​tras animacji. W firefox nie.

Dlaczego firefox nie uruchamia animacji css, gdy wyświetlacz jest ustawiony tak, aby blokował się jak w chrome?

<link rel="stylesheet" href="animate.min.css" /> 

<div class="el bounce animated"> 
    The div 
</div> 

<script type="text/coffeescript"> 
    $('.el').css(display: 'none') 
    $(document).on 'click', -> 
    $('.el').css(display: 'block') 
<script> 

Answer 1

Po badaniach i testach, prawdziwe pytanie rzeczywiście wydaje się być „Dlaczego WebKit czekać, aby odtworzyć animację, aż zostanie wyświetlony element”. Zarówno Firefox, jak i Internet Explorer nadal odtwarzają animację, nawet jeśli jest to display: none;, ale przeglądarki WebKit, takie jak Chrome i Safari, czekają. This Mozilla bug report comment w powiązanej kwestii sugeruje, że Firefox robi to w ten sposób, aby zachować zgodność ze specyfikacją, stwierdzając, że dopasowanie zachowania Chrome wymagałoby zmiany specyfikacji.

Wygląda na to, że Firefox i Internet Explorer prawidłowo uruchamiają animację, niezależnie od stanu wyświetlania, ale WebKit zamiast tego wybiera optymalizację renderowania, nie uruchamiając animacji na elementach display: none;. Pamiętaj, że WebKit wciąż jeszcze nie odznacza właściwości animacji z powodu nierozwiązanych rozbieżności.

Nie udało mi się znaleźć innego zestawu reguł CSS, które mogłyby osiągnąć pożądany wynik. Myślę, że najlepszym rozwiązaniem jest dodanie klasy animacji do obsługi kliknięcia lub użycie klasy, która ustawia wartość wyświetlania i włącza animację.

UPDATE:

apaul34208 dostarczył JSFiddle do wykazania tego obejścia.