スムーズにメニューをスライド

Question

私はいくつかのjQueryを作成していますので、誰かが2menuボタンをクリックするとオフキャンバスのnav-barが表示されますが、うまくいかないようで、誰かが開く/閉じるときに滑らかなスライド効果を得る方法メニューご協力いただきありがとうござい

私のjQueryのです：。。

$(".menutrigger").click(function() { 
    $(".nav").toggleClass("show-nav"); 
    $(".page-wrap").toggleClass("page-wrap-menu", { direction: "left" }, 1000); 
}); 

ウェブサイト：

http://ubie-global.ubieportal.co.uk/

Answer 1

あなたは0123を追加することによって、これを達成することができますクラスpage-wrapの要素への

.page-wrap { 
    min-width: 100%; 
    min-height: 100%; 
    position: relative; 
    top: 0; 
    bottom: 100%; 
    left: 0; 
    z-index: 1; 

    /* Transition */ 
    transition: left ease-in-out 0.3s; 
} 

CSSトランジションCSSプロパティを変更するときにアニメーションの速度を制御する方法を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることができます。たとえば、要素の色を白から黒に変更すると、通常は変更が瞬時に行われます。 CSSトランジションを有効にすると、加速カーブに続く時間間隔で変更が行われ、そのすべてをカスタマイズできます。

出典：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

を編集し、更新に応じて

追加。

あなたは、いくつかのCSSの変更を加えることでそれを行うことができます

.nav { 
    list-style: none; 
    background: #fff; 
    width: 360px; 
    height: 100%; 
    position: fixed; 
    z-index: 999; 
    top: 0; 
    display: block; 
    right: 0; 
    transform: translateX(360px); 
} 

.page-wrap { 
    min-width: 100%; 
    min-height: 100%; 
    position: relative; 
    top: 0; 
    bottom: 100%; 
    z-index: 1; 
    transform: translateX(0px); 
    overflow: visible; 
    transition: all 0.9s ease; 
    overflow: visible !important; 
} 

Answer 2

：

.nav { 
list-style: none; 
background: #fff; 
width: 360px; 
height: 100%; 
position: fixed; 
z-index: 0; 
right: -360px; // changed from 0 to -360px 
top: 0; 
/* display: none; */ 
} 

.show-nav { 
/* display: block !important; */ 
right: 0; // add this line 
} 

より

.page-wrap, .nav { 
transition: all 0.2s ease; 
} 

Answer 3

上記の答えのようなトランジションを使用しますが、leftとrightをアニメーション化していないこれを追加それは本当に遅く、遅れます。代わりにtransformを使用してください。