火狐动画未开始切换显示样式

Question

小提琴http://jsfiddle.net/B9h8y/1/

在chrome中，当我单击文档时，动画就会运行。在firefox中，情况并非如此。

为什么火狐不触发css动画时，显示设置为阻止像在铬?

<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

经过研究和测试，真正的问题似乎是：“为什么WebKit要等到元素显示后再播放动画呢？”火狐和it继续播放动画，即使是display: none;，但WebKit浏览器，如Chrome和Safari等。This Mozilla bug report comment在一个相关的问题上表示，火狐这样做是为了遵循规范，说明匹配Chrome的行为需要修改规范。

因此，火狐和Internet似乎不管显示状态如何，都在正确地运行动画，但是WebKit却选择通过不在display: none;元素上运行动画来优化呈现。请记住，由于未解决的差异，WebKit还没有为动画属性添加前缀。

我找不到一套不同的CSS规则来达到你想要的结果。我认为最好的解决方法是在单击处理程序上添加动画类，或者使用设置显示值并启用动画的类。

更新：

apaul34208提供了一个JSFiddle来演示这个解决方案。