私は、CSS3 トランジションを使用するスライドショー スクリプト、または利用できない場合の jQuery のアニメーションに取り組んできました。スライド アニメーションを適切に実行するカスタム関数を作成しました。すべてがうまく機能しているように見えましたが、テスト中に大きな問題が発生しました。
何らかの理由で、大きなスライドショーのトランジションの前後に jQuery CSS を適用するのに大きな遅延があります。たとえば、下のリンクのスライドショーは幅が約 9900 ピクセルです (コンテナーの幅で、ほとんどが隠されています)。コンテナーは、CSS3 トランジションとトランスフォーム プロパティを使用して、適切なスライドを表示するように操作されます。以下のペーストの 75 行目から 82 行目の間に CSS を適用すると、遅延が発生します。特に、'transition' CSS を適用すると問題が発生します。'transition' CSS を (JS で適用するのではなく) スタイルシートに追加すると、遅延がなくなります。ただし、これは実際には解決策ではありません。特定のプロパティで CSS3 トランジションを使用したいだけで、変化する可能性があるためです (スタイルシートで 'all' を使用すると、アニメーション化したくないが定期的に変更される CSS がトランジションされます)。
アニメーション機能： http: //pastebin.com/9wumQvrP
スライドショーのデモ: http://www.matthewruddy.com/demo/?p=2431
本当の問題は、スライドショー (場合によってはブラウザも) が完全に使えなくなる iOS にあります。エラーを特定することはできず、JS のデバッグに関する私の知識は本当に尽きてしまいました。少し遊んだ後、関数のこのセクションに関連していると確信しており、プラグイン内の CSS3 サポートを完全に無効にすると、問題が完全に解消されます。
私は完全に立ち往生しており、誰でもできる助けに本当に感謝しています。
- - 編集 - -
jQuery の .css 関数ではなく、ネイティブ Javascript を使用して CSS を適用しようとしました。同じ結果、より良いパフォーマンスはありません。また、これは Firefox ではまったく発生せず、Webkit ブラウザーでのみ問題になるようです。
解決策をお持ちの方は、ビールを数杯寄付していただければ幸いです。私は本当にこれを理解することはできません!
--- 二度目の編集 ---
OK、デバッグを行ったところ、ブラウザの再描画サイクルに非常に長い時間がかかっていることがスローダウンの原因であることがわかりました。これを処理するより良い方法はありますか? 要素を完全に配置することは、再描画を減らす方法として知られていますが、スライドショーはレスポンシブであるため、実際には機能していません。スライド画像またはスライド自体を絶対に配置すると、折りたたまれます。
--- 三回目の編集 ---
1日後、私はいくつかの進歩を遂げました。'transition: all 0s ease' を要素のスタイルシート CSS に追加すると、元の投稿で言及されているカスタム アニメーション機能を介してインライン CSS トランジション プロパティを追加することによって引き起こされる再描画がなくなりました。これにより、特にトランジション自体が終了したときにインライン CSS トランジション プロパティを削除すると、パフォーマンスが大幅に向上します。
いい物！ただし、トランジション後にインライン CSS トランスレートが削除され (ハードウェア アクセラレーション トランジション エフェクト自体を作成するために使用された)、左側の配置が適用されると、まだ速度が低下します。2 つが一緒に発生すると、速度が低下します。
それらを 2 つの別々のタスクに分割すると (翻訳が削除され、時間を指定せずに setTimeout に左の位置が追加されます)、再び再描画が取り除かれます = パフォーマンスが向上し、問題が解決したように見えます。ただし、CSS トランジション プロパティが十分に高速に無効化されず、変換の削除がアニメーション化される場合があります。ダメです。それを回避するために次にどこを見たらよいかわかりません。