ページの上部に非表示のメニューが必要です。ボタンをクリックすると下にスライドし、他のコンテンツが下に移動します。私が持っているのは非表示のメニューで、jQuery 関数を使用slideDown()しslideUp()て切り替えます。問題は、例えば。iPhone ではスライドが滑らかではないので、アクセラレーションを使用したいと思います。
here-webkit-trasnform: translate3dの説明どおりに追加したかったのですが、これはjQueryのスライド機能では機能しないようです。また、使用しようとしましたが、機能しませんでした（jQueryトグルも同じものを使用していると思います）。したがって、おそらく transform3d は、座標 (左、上 ..) を調整することによって要素を移動する場合にのみ機能し、幅と高さは機能しないことがわかりました。jQuery('.menu').animate({height: ..})
この jQuery プラグインhttps://github.com/benbarnett/jQuery-Animate-Enhancedを見つけました。これは、幅と高さの変更も加速するのに役立ちますが、私の場合はまったく機能しませんでした。
そのため、Top プロパティを調整し、translate3d を追加することでメニューを移動することができました。これにより、最終的にメニューが滑らかに移動しますが、メニューがスライドするときに下のコンテンツを強制的に下に移動することはできません-メニューに position:relative があり、画面の外に移動しても、コンテンツの上部にはまだその高さの穴があります。position:absolute がある場合、以下のコンテンツには影響しません。position:static の場合、Top: プロパティは影響しません。
何か不足していますか、またはこれを実装するための「推奨される」方法は何ですか? 現在の実装はhttp://www.huureenkerstboom.nlで確認できます(モバイル実装を表示するには、ブラウザー ウィンドウのサイズを小さくしてください)。