Слайд-меню гладко

Question

Я сделал несколько jquery, поэтому, когда кто-то нажимает на кнопку 2menu, на панели навигации на холсте отображается. Однако я не могу понять, как получить гладкий эффект слайда, когда кто-то открывает/закрывает .. меню Спасибо за вашу помощь

Мой 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

Вы можете сделать это путем добавления transition к элементу с классом 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

Редактировать

дополнения в соответствии с вашим обновления.

.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

вы можете сделать это, добавив несколько изменений CSS:

.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 , что будет очень медленным и медленным. Вместо этого используйте трансформацию.