小提琴http://jsfiddle.net/B9h8y/1/
在chrome中,当我单击文档时,动画就会运行。
在firefox中没有。
为什么firefox不触发css动画,当显示设置为块,像在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>

最佳答案

经过研究和测试,真正的问题似乎是,“为什么webkit要等到元素显示出来才播放动画。”firefox和internet explorer都会继续播放动画,即使是display: none;,但chrome和safari等webkit浏览器会等待。This Mozilla bug report comment关于一个相关的问题,firefox这样做是为了遵循规范,声明匹配chrome的行为需要更改规范。
因此,不管显示状态如何,firefox和internet explorer似乎都在正确地运行动画,但是webkit选择通过不在display: none;元素上运行动画来优化渲染。请记住,由于未解决的差异,webkit仍然没有取消动画属性的前缀。
我找不到一组不同的css规则来实现您想要的结果。我认为最好的解决方法是在click处理程序上添加animation类,或者使用设置显示值并启用animation的类。
更新:
APAUL34208提供了一个JSFiddle来演示此解决方案。

关于css - Firefox动画未在切换显示样式上启动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24589537/

10-12 12:51
查看更多