Firefox动画无法从切换显示样式开始 [英] Firefox animation not starting on toggle display style

问题描述

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

在Chrome中，当我单击文档时，动画运行。
在Firefox中不会。

In chrome when I click the doc the animation runs. In firefox it doesn't.

为什么当显示设置为像Chrome中那样阻塞时firefox会触发CSS动画？ >

Why doesn't firefox trigger css animations when display is set to block like in 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>

推荐答案

经过研究和测试， be，为什么WebKit等待播放动画，直到元素显示。 Firefox和Internet Explorer都会继续播放动画，即使是 display：none; ，但WebKit浏览器（如Chrome和Safari）仍会等待。 关于相关问题的此Mozilla错误报告评论表明Firefox以这种方式执行操作，以便跟踪

After research and testing, the real question actually appears to be, "Why does WebKit wait to play the animation until the element is displayed." Both Firefox and Internet Explorer continue to play the animation, even when it is display: none;, but WebKit browsers such as Chrome and Safari wait. This Mozilla bug report comment on a related issue suggests that Firefox does it this way in order to follow the specification, stating that matching Chrome's behavior would require changing the specification.

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

So it seems that Firefox and Internet Explorer are rightfully running the animation regardless of the display state, but WebKit is instead choosing to optimize the rendering by not running animation on display: none; elements. Remember that WebKit still has yet to un-prefix the animation properties because of unresolved discrepancies.

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

I was unable to find a different set of CSS rules that would achieve your desired result. I think your best workaround is to add the animation class on the click handler or use a class that sets the display value and enables the animation.

UPDATE： / strong>

UPDATE:

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

apaul34208 has provided a JSFiddle to demonstrate this workaround.

这篇关于Firefox动画无法从切换显示样式开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！