2

移動したときにスライドインおよびスライドアウトするセクションを持つページレイアウトを作成しようとしています。各セクションは画面全体に表示され（幅/高さ100％）、パーセンテージベースの値で絶対的に配置されます。

添付のサンプルには、次のように配置された4つのセクションがあります。

[a]
[b] [c] [d]

ここで、[a]は0 0、[b]は0 100％、[c]は100％100％、[d]は200％100％です。

ここで、ナビゲーションを実現するために、すべてのセクションを100％x 100％の絶対位置に配置され、オーバーフローした非表示のコンテナーに配置しました。セクションに移動すると、コンテナの「上」と「左」の値がセクションのオフセットの負の値にアニメーション化されます。たとえば、[d]が選択されている場合、コンテナは-200％-100％にアニメーション化されます。

奇妙な行動がたくさんあります！0％オフセットにナビゲートする場合（左に移動または上に移動）、遷移は正常に機能します。ただし、他の組み合わせ（つまり、負のオフセット）は、一見非論理的な（まだ一貫した）癖になります。

自分の目で確かめてください：http：//www.doronassayas.com/ypsite

要約は次のとおりです。

  • [c]および[d]から[a]または[b]のいずれかが正常に機能します。
  • [a]から[b]および[a]から[d]：最後にジャンプし、最初に戻ってアニメーションを開始します。
  • [a]と[b]から[c]は最も奇妙です-遷移が始まる前に、ボディ全体（または他の高レベルの要素？）がCSSでは追跡できない視覚的なオフセットにポップします（Firebugや他の開発では見えません）ツール）。したがって、CSS値が[c]にあるはずであることを明確に示していても、[c]に到達するのではなく、（視覚的に）[d]に到達します。Firebug階層をクリックするなどのランダムな操作を行うと、ビューが正しい場所にリセットされます。WTF？

これをFirefox4、Chrome 10、Safari 5でテストしたところ、jQuery.animate（）を使用する場合でも、Louis Remiの非常にクールなjQuery.transitionプラグインを使用する場合でも、すべてのブラウザーで同じ動作が発生します。 animate（）が呼び出されたときに新しいオフセット値を使用します。

奇妙さの一貫性は私に興味をそそられます。何か案は？

どんな助けでも大歓迎です。

4

1 に答える 1

1

かなりの髪の毛を引っ張った後、私は最終的にオーバーフローをオンにすることによってバグのある動作を診断しました：ボディ要素の自動。負の値を持つポジショニングアンティックは、計算された体の幅と高さに大混乱をもたらします。これは、遷移中に変化し続けます（実際には、ウィンドウの100％に留まることはありません。これは、予想される動作でした）。その結果、ブラウザ間で驚くほど一貫性がありますが、スクロールバーが変動し、body要素のスクロール位置が正しくなくなります。

解決策は非常に単純であることが判明しました。

body
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

これまで使用したことのない固定位置により、body要素はコンテンツの変更を無視して固定サイズと位置を維持します。そして、あなたはそれを持っています！素敵なトランジション、jQueryとLouisRemiのおかげでサポートされているハードウェアアクセラレーション。

于 2011-05-03T22:33:54.720 に答える