3

代わりに CSS アニメーションと変換を使用してローダー gif を作成しようとしています。残念ながら、次のコードは、私の Mac OSX での Firefox (および場合によっては Chrome、Safari) の CPU 使用率を <10% から >90% に変換します。

i.icon-repeat {
   display:none;
  -webkit-animation: Rotate 1s infinite linear;
  -moz-animation: Rotate 1s infinite linear; //**this is the offending line**
   animation: Rotate 1s infinite linear;
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
   to {-webkit-transform:rotate(360deg);}
}
@-keyframes Rotate {
  from {transform:rotate(0deg);}
   to {transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
  from {-moz-transform:rotate(0deg);}
   to {-moz-transform:rotate(360deg);}
}

infinite linearローテーションまたは-moz-ベンダー プレフィックスがないと、「ローダー gif」のような動作が失われることに注意してください。つまり、アイコンは継続的に回転しません。

おそらくこれは単なるバグでしょうか、それとも私が何か間違ったことをしているでしょうか?

4

3 に答える 3

1

私は自分の問題を修正しました。アイコンの表示を切り替える代わりに、アイコンを追加してからDOMから削除しました。CSSアニメーションの使用について私が知らなかった重要なことは、どちらの方法でもdisplay:noneCPUdisplay:inlineを消費するということです。

したがって、その代わりに、これを実行します（上記の私の質問のCSSと組み合わせて）：

var icon = document.createElement("i"); //create the icon
icon.className = "icon-repeat";

document.body.appendChild(icon);  //icon append to the DOM

function removeElement(el) {    // generic function to remove element could be used elsewhere besides this example 
  el.parentNode.removeChild(el);
}

removeElement(icon); //triggers the icon's removal from the DOM
于 2012-09-30T20:10:07.633 に答える
1

まず、使用している Firefox のバージョンを教えてください。これはバグかもしれませんが、CSS3 アニメーションはほんの一瞬でも多くの CPU を使用することが知られています。ただし、jQuery の対応するものよりもはるかに高速です。

@-キーフレームではありません。@キーフレームです。

余談ですが、回転する画像よりも新しいものを使用した方がよいと思います。

于 2012-08-02T12:03:16.457 に答える
0

バグの可能性があります。しかし、これらのベンダーの接頭辞が付いたものの多くと同様に、それはまだ非常に進行中の作業です。全体的に信頼性の高い結果を得るには、JavaScript（おそらくjQuery）を使用することをお勧めします。

于 2012-08-02T11:42:39.883 に答える