人々がセクションをスワイプできる webapp を構築しています。これらのセクションは、ほとんどがリストビューで満たされています。私の現在の設定は次のとおりです。
- on touchmove: 新しい translate3d 値を設定します
- on touchend: セクションのコンテナーがそこにスナップし、rAF を介してアニメーション化する必要がある translate3d 値を計算します。
ただし、スワイプすると、「複合レイヤー」に数十ミリ秒かかるさまざまなポイントが表示されます(約40〜70ミリ秒)。box-shadow などの複雑な計算を回避したので、これを改善するにはどうすればよいでしょうか? 残りの JS の処理は問題ありません。イベントには約 3 ミリ秒かかり、スタイルの再計算にはさらに 3 ミリ秒かかりますが、「複合レイヤー」の大きな塊です。