jquery - 滑动切换类

Question

我有一个用于覆盖滑出菜单的切换类。

叠加层的 css 样式为:

background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all 0.5s ease-in;
z-index: 9999;

切换类的 jQuery 是:

    $('#shiftnav-toggle-main-button, .shiftnav-panel-close').on('click', function(){ // On click on menu button or close button
$("#shiftnav-toggle-main-button").toggleClass('overlay', 500, 'easeIn'); 
});

toggle 类在菜单打开时滑入，但是当菜单关闭时，它就消失了，而不是滑出。当菜单关闭时，如何让它遵守 css 转换设置？

Answer 1

它回到你的代码和你的 UI 逻辑，因为你把你的按钮变成覆盖，所以当你的类有 width 但元素没有时，它不会向右播放 transition。

删除:

transition: all 0.5s ease-in !important;

从 .overlay 然后将 .shiftnav-toggle 替换为:

.shiftnav-toggle {
    cursor: pointer;
    transition: all 0.5s ease-in !important;
    width: 100px; // sample width and height
    height: 20px;
}

查看结果以了解我的第一条评论。但我强烈建议您更改代码，而不是将 width 添加到您的元素，而是添加一个 overlay 并且不要将您的按钮变成一个覆盖层。