0

私はこの問題に遭遇し、何日も前から必死に修正しようとしています。私が今行ったことは、問題全体の説明と動作するサンプル コードを表示する jsfiddle を作成することです。

http://jsfiddle.net/jEN8X/7/

document.addEventListener("DOMContentLoaded", function () {
    var e, t = document.querySelectorAll("div.bounceInDown");
    for (var n = 0, r = t.length; n < r; n++) {
        e = Math.round(Math.random() * 7e3) + "ms";
        t[n].style.animationDelay = e;
        t[n].style.WebkitAnimationDelay = e
    }
}, false)

私は何を間違っていますか？IE 10 または Opera では動作しないようです。

編集: IE10 は、ページを更新するときにのみスクリプトを起動するようです。

4

2 に答える 2

0

JSFiddle の例を見ると、このエラーは CSS 行のように見えます。

@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px)}60% {opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}

上記では、非 moz (animation-nameの代わりにmoz-animation-name) および webkit (animation-nameの代わりにwebkit-animation-name) プレフィックスを使用することを期待しています。

また、その@-o-keyframes発言の意味は何ですか？

于 2013-06-20T17:39:08.203 に答える
0

Opera は、ページの読み込み中に、気付かないうちにアニメーションを開始しているようです - を大きくするanimation-durationと、はっきりとわかります ( Demo )。DOMContentLoaded少なくともanimation-delay既に実行中のアニメーションに を適用するには、待機が遅すぎます。

これを修正するには、ランダムな遅延を設定した後にのみアニメーションを開始します。たとえば、animation-nameその時点で ( Demo ) を追加できます。

于 2013-06-20T18:26:58.163 に答える