Firefox 动画未以切换显示样式启动

Posted 2023-03-06

【中文标题】Firefox 动画未以切换显示样式启动

【英文标题】：Firefox animation not starting on toggle display style

【发布时间】：2014-08-26 16:37:27

【问题描述】：

小提琴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>

【问题讨论】：

css 不包含 Mozilla 前缀。这可能是它不能与 Firefox 一起使用的原因。检查 developer.mozilla.org/en-US/docs/Web/CSS/Reference/… 以查看所有 mozilla css

@jtorrescr 最新的 Firefox 浏览器不需要为使用的 CSS 属性添加供应商前缀。

【参考方案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 来演示此解决方法。

【讨论】：

+1 我正要写一个类似的答案，但你已经很好地涵盖了它。这是您在上一段中提到的解决方法的示例jsfiddle.net/B9h8y/3，如果您愿意，请随时在您的答案中使用它。