Firefox animazione non a partire dal formato di visualizzazione a ginocchiera

Question

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

in Chrome quando clicco il doc piste di animazione. In firefox no.

Perché Firefox non attiva le animazioni CSS quando il display è impostato su un blocco come in 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

Dopo ricerche e test, la vera questione in realtà sembra essere: "Perché WebKit ora di giocare l'animazione fino a visualizzare l'elemento." Sia Firefox che Internet Explorer continuano a riprodurre l'animazione, anche quando è display: none;, ma i browser WebKit come Chrome e Safari aspettano. This Mozilla bug report comment su un problema correlato suggerisce che Firefox fa in questo modo per seguire le specifiche, affermando che per abbinare il comportamento di Chrome sarebbe necessario modificare le specifiche.

Sembra quindi che Firefox e Internet Explorer eseguano correttamente l'animazione indipendentemente dallo stato di visualizzazione, ma WebKit sta invece scegliendo di ottimizzare il rendering non eseguendo l'animazione sugli elementi display: none;. Ricorda che WebKit deve ancora non anteporre le proprietà dell'animazione a causa di discrepanze irrisolte.

Non è stato possibile trovare un set diverso di regole CSS che consenta di ottenere il risultato desiderato. Penso che la soluzione migliore sia aggiungere la classe di animazione sul gestore di clic o utilizzare una classe che imposta il valore di visualizzazione e attiva l'animazione.

UPDATE:

apaul34208 ha fornito un JSFiddle per dimostrare questa soluzione alternativa.