Firefox动画无法启动切换显示样式

Question

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

在Chrome中单击文档时动画运行。 在Firefox中它没有。

当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等到播放动画才会显示元素。” Firefox和Internet Explorer都会继续播放动画，即使它是display: none;，但Chrome和Safari等WebKit浏览器会等待。关于相关问题的This Mozilla bug report comment表明，Firefox会按照这种方式执行此操作，并说明匹配Chrome的行为需要更改规范。

因此，无论显示状态如何，Firefox和Internet Explorer似乎正确地运行动画，但WebKit选择通过不在display: none;元素上运行动画来优化渲染。请记住，由于未解决的差异，WebKit仍然没有为动画属性取消前缀。

我无法找到一组能够达到预期效果的CSS规则。我认为您最好的解决方法是在点击处理程序上添加动画类，或者使用一个设置显示值并启用动画的类。

<强>更新

apaul34208提供了JSFiddle来演示此解决方法。