0

我animate.css用来为页面中的一些元素设置动画。有一个 JQuery 插件可以帮助您轻松使用它animateCSS.js （来自 GitHub）。问题是动画在 Safari 中有效，但在 Firefox 和 Chrome 中无效，例如，我使选择器不可见：

#top{
  visibility: hidden;
}

这个 JQuery 脚本将其淡入：

$('#top').animateCSS('fadeInDown', 400);

400 毫秒后它变得可见，但没有动画！

它在这里在线http://ashraafi.com/index.html

4

2 回答 2

0

我制作了示例： http: //jsfiddle.net/QkCq2/在 Chrome HTML 中工作：

<div class="animated fadeInDown" style="background-color:green;">
<pre>


</pre>
</div>

CSS：

.animated {
    -webkit-animation-duration: 2s;
       -moz-animation-duration: 2s;
        -ms-animation-duration: 2s;
         -o-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}


.fadeInDown{
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -ms-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
于 2012-11-22T19:36:03.417 回答
0

很奇怪，看起来作者在他的插件代码中留下了不应该存在的部分 - 至少它没有记录在应该存在的任何地方。

删除插件的第 63-67 行：

        if (!$("html").hasClass("csstransforms")) {

            onEnd();

        }

这导致动画立即停止。为什么它在 Safari 中工作我不知道。

于 2012-11-22T20:02:40.530 回答