顺利滑动菜单

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，这将非常缓慢而且有些滞后。改用转换。