Firefox動畫未啓動切換顯示樣式

提琴http://jsfiddle.net/B9h8y/1/Firefox動畫未啓動切換顯示樣式

在chrome中，當我點擊文檔時動畫運行。在Firefox中並沒有。

爲什麼firefox不能觸發css動畫，當display設置爲像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>

來源

2014-07-05 clyfe

css不包含Mozilla前綴。這可能是它不使用Firefox的原因。查看https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions以查看所有的mozilla css – jtorrescr

@jtorrescr最新的Firefox瀏覽器不需要供應商爲使用的CSS屬性添加前綴。 –

研究和測試後，真正的問題卻似乎是，「爲什麼直到顯示元素的WebKit等待播放動畫。」 Firefox和Internet Explorer都會繼續播放動畫，即使它是display: none;，但WebKit瀏覽器（如Chrome和Safari等）仍在等待。 This Mozilla bug report comment對相關問題的建議表明，Firefox採用這種方式來遵循規範，指出Chrome的行爲需要更改規範。

因此，似乎Firefox和Internet Explorer無論顯示狀態如何正確運行動畫，但WebKit相反選擇通過不在display: none;元素上運行動畫來優化渲染。請記住，因爲未解決的差異，WebKit仍然沒有對動畫屬性加前綴。

我無法找到一組不同的CSS規則來實現您想要的結果。我認爲你最好的解決方法是在click處理程序中添加動畫類，或者使用設置顯示值並啓用動畫的類。

UPDATE：

apaul34208提供了JSFiddle證明這一點的解決方法。

來源

2014-07-05 19:24:07

+1我剛剛寫了一個類似的答案，但你已經很好地報道了。這裏有一個解決方案的例子，就像你在最後一段http://jsfiddle.net/B9h8y/3/中提到的那樣，如果你願意，可以隨意在你的答案中使用它。 – apaul

Firefox動畫未啓動切換顯示樣式

回答

相關問題