いくつかの要素を (jquery または mootools を使用して) アニメーション化するための最良かつパフォーマンスの高い方法を探しています。たとえば、要素を移動する必要がある場合は、次のことをお勧めします。
- 絶対に配置し、上または左を使用します
margin-top または margin-left を使用して絶対に配置する- 配置を固定し、上または
左を使用します - 大きなコンテナを作成し、
background-positionを使用する
いくつかの要素を (jquery または mootools を使用して) アニメーション化するための最良かつパフォーマンスの高い方法を探しています。たとえば、要素を移動する必要がある場合は、次のことをお勧めします。
left
/top
値を指定しない場合は、絶対位置 + マージン操作がうまく機能します。
どんなトリック?
絶対位置を持つがleft
/top
を持たない要素は、静的要素が発生するのと同じ位置にレンダリングされますが、margin-left
/margin-top
はその位置に追加されます。
全体として、オプションとして静的位置について言及していないことに感謝します。そのような要素をアニメーション化すると、不要なレイアウトのリフローが発生します。これが DOM/タイムアウト アニメーションの主な欠点です。
あなたが検討しているオプションの中で、最もパフォーマンスが高いのはバックグラウンド オプションだと思います。ただし、移動できるのはグラフィック コンテンツのみであるため、用途は限られています。だから私はオプション#1を選びます。