小提琴
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规则.我认为您最好的解决方法是在点击处理程序上添加动画类,或使用设置显示值并启用动画的类.
更新：
