1

ページの左、上、または右に配置されている別のdivのボタンをクリックすると、中央のdivが画面から押し出されるWebサイトを構築しています。

左、上、右の div は jquery ajax を使用してロードされ、css3 を使用してアニメーション化されます。

これが私が話しているページです：

http://www.uvm.edu/~areid/homesite/index.html

Chrome と Firefox で左目をクリックしてみてください。アニメーションは Firefox ではスムーズですが、Chrome では途切れます。

なぜこれが起こっているのか誰にも分かりますか？

また、ウェブサイトをスピードアップしたり、トランジションをよりスムーズに見せる方法を誰かが知っているかどうかも疑問に思っていました.

助けてくれてありがとう

一番、

ケイティ

4

1 に答える 1

3

Chrome のジャーキネスがはっきりとわかります。

ブラウザで他の多くのことを行っている場合、CSS3 アニメーションは必ずしもスムーズに実行されるとは限りません。それらがどれだけスムーズに実行されるかは、同時に何をしようとしているか、およびブラウザーの内部実装がそれをどのように処理するかによって異なります。

手の込んだ CSS3 トランジションを使用する CSS3 スライドショーでの私の経験から、それらをスムーズに実行できるようにする最善の方法は、アニメーションをスムーズに実行すると同時に、コードで実質的なことを行わないことです。スムーズな実行の可能性を最大化するためのいくつかの方法を次に示します。

  1. アニメーションの実行中に必要になる可能性のあるリソースをプリロードします。
  2. アニメーションの実行中に JavaScript 関数をキックしないでください。
  3. アニメーション中に画像を読み込まないようにします。
  4. アニメーションの後に実行したいものについては、アニメーションの完了関数を介して操作をトリガーします (したがって、アニメーションが完了するまで開始されません)。
  5. アニメーションが完了したときにビルドして準備ができているものが必要な場合は、アニメーションを開始する前に最初にビルドし、アニメーションを開始する前に非表示にして準備を整えます。
  6. アニメーション中に DOM を変更しないでください (アニメーションに特に必要なものを除く)。

より具体的には、あなたのページでは、スライドのトランジションにぎくしゃくした動きが見られますが、スライドと同時に、ブラウザがスライド中に表示される新しいコンテンツを読み込もうとしていることがわかります。その新しいコンテンツの読み込みと表示が、スライドのトランジションのぎこちなさの一因になっている可能性があります。スライドが完了するまで待って新しいコンテンツの読み込みを開始するか、スライドを開始する前に新しいコンテンツをプリロードすることをお勧めします。ブラウザーがネットワーク経由で画像を読み込んでいるときでも、一部のブラウザーでは CSS3 トランジションがぎくしゃくすることがわかりました。

于 2012-10-31T19:34:56.753 に答える