Firefox animasyon değişikliği Görüntü tarzı başlayan değil

Question

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

krom ben doc animasyon çalışır tıkladığınızda. Firefox'ta değil.

Neden firefox tetik css animasyonlar ekran krom gibi engellemeye ayarlıdır ne zaman? araştırma ve testlerden sonra

<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

, asıl soru aslında görünüyor "eleman görüntülenene kadar niye WebKit bekleme animasyon oynamaya gelmez." Firefox ve Internet Explorer Gerek display: none; olduğunda bile, animasyon oynamaya devam, ancak bu tür Chrome ve Safari gibi WebKit tarayıcıları bekleyin. İlgili bir konu hakkında This Mozilla bug report comment Firefox Chrome'un davranışını eşleşen şartname değiştirerek gerektirecektir belirten şartname takip etmek için bu şekilde durumda olduğunu göstermektedir.

Dolayısıyla, Firefox ve Internet Explorer, görüntü durumundan bağımsız olarak animasyonu haklı bir şekilde çalıştırıyor gibi görünüyor, ancak WebKit bunun yerine, display: none; öğelerinde animasyon çalıştırmayarak oluşturma işlemini optimize etmeyi seçiyor. WebKit'in çözülmemiş tutarsızlıklar nedeniyle animasyon özelliklerini henüz önbelleğe almadığını unutmayın.

Ben istenen sonucu verecektir CSS kurallarının farklı bir dizi bulamadı. En iyi çözümün, animasyon sınıfını tıklama işleyicisine eklemek veya görüntü değerini ayarlayan ve animasyonu etkinleştiren bir sınıf kullanmak olduğunu düşünüyorum.

GÜNCELLEME:

apaul34208 bu geçici çözümü göstermek için bir JSFiddle sağlamıştır.