0

http://mashable.com/の素敵なモバイル メニューの実装を模倣しようとしています (ブラウザの幅を狭めて、左上にメニュー ボタンが表示されるようにし、それをクリックします)。

基本的に、ボタン（#slide-menu）があります。ページ コンテンツの残りの部分は、ボタンがクリックされたときに右に 250 ピクセル以上スライドさせたい '#nudge' div にラップされています。

jQuery('#slide-menu').click(function() {
        jQuery('#nudge').css('-webkit-transform', 'translate(250px, 0)');
        jQuery('#mobile-menu').css('display', 'block');
    });

#mobile-menu には、画面の左側から飛び出すナビゲーションが含まれています。このコードは機能しますが、スムーズな遷移はありません。コンテンツが右にポップしてメニューが表示されますが、マッシャブルのようにスムーズにスライドするための遅延はありません。複数のプレフィックスを許可するために .css() を使用する代わりにクラスを切り替えようとしましたが、運がさらに悪くなりました。

transform プロパティの仕組みを誤解しているかどうかはわかりません。私はそれを読んでみましたが、見つけることができるほとんどの例は、別の要素をクリックして要素を操作するのではなく、要素にカーソルを合わせてアニメーション化することに関連しています。

助けてくれてありがとう！

4

1 に答える 1

0

確かに移行期間がありませんでした！

    jQuery('#slide-menu').click(function() {
        jQuery('#nudge').toggleClass('slide-menu');
    });

そしてCSS：

.slide-menu{
    transform: translate(180px, 0);
    -ms-transform: translate(180px, 0);
    -moz-transform: translate(180px, 0);
    -webkit-transform: translate(180px, 0);
    -o-transform: translate(180px, 0);
    -webkit-transition-duration: 1s;
}

出来上がり！

于 2012-12-19T20:07:59.080 に答える