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

前端之家收集整理的这篇文章主要介绍了css – Firefox动画无法启动切换显示样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
小提琴 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>

解决方法

经过研究和测试,真正的问题实际上似乎是“为什么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来演示此解决方法.

原文链接:https://www.f2er.com/css/217475.html

猜你在找的CSS相关文章