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

非常に奇妙なことに、作成者がプラグイン コードにあるべきではない部分を残したようです。少なくとも、そこにあるはずの文書はどこにもありません。

pluign の 63 ～ 67 行目を削除します。

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

            onEnd();

        }

そのため、アニメーションがすぐに停止していました。なぜSafariで機能したのかわかりません。

于 2012-11-22T20:02:40.530 に答える
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 に答える