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浏览器都在等待.这篇关于相关问题的Mozilla bug报告评论表明Firefox是这样做的,以便遵循规范,声明匹配Chrome的行为需要更改规范.

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

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

更新:

apaul34208提供了一个JSFiddle来演示这种解决方法.