7

私は進行状況バー コントロールを作成しています。実際には進行状況が表示されず、「何かが起こっている」というインジケーターが回転するだけの場合に取り組んでいます。私が持っているデザインは、基本的に斜めのストライプを交互に並べたもので、本質的には理髪店のポールのようなものですが、「回転」しています。

バーバー ポール プログレス バー

レンダリング エンジンにできる限りオフロードすることを期待して、これには CSS トランジションを使用したいと考えています。古いブラウザーをサポートすることは、私にとっては問題ではありません。

だから、私の最初のアイデアは、基本的にこれを行うことでした：

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

...そして、画面にレンダリングされたら、Javascriptを使用して基本的にこれを行います:

myBarberPole.style.backgroundPosition = '-1000000px 0';

以下に関するパフォーマンス上の問題はありますか?

  1. その長い間の移行
  2. 持っていbackground-position: -1000000px 0ますか？

または、より良い解決策はありますか？

4

2 に答える 2

2

パフォーマンス上の問題はあり得ないと思います。より多くの CPU やメモリを使用するのは、大きな数値を使用するからではありません。

于 2011-06-14T14:00:16.580 に答える
0

それ自体への「連鎖」遷移がない場合 (私が知る限り、遷移がいつ終了したかを伝える純粋な CSS の方法はありません)、これは良い解決策になる可能性がありますが、ジャスティンが言うように、それには巨大な画像が必要です! 古き良きアニメーション GIF を使用しても問題はありませんか?

于 2011-06-14T14:07:43.043 に答える