滑动切换类答案

【问题标题】：Slide Toggle Class滑动切换类
【发布时间】：2018-02-05 11:28:24
【问题描述】：

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

叠加层的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'); 
});

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

【问题讨论】：

你应该在类的元素easeOut上设置easeIn，或者只是在元素上设置ease（从你的jQuery代码中删除任何轻松），也是你的按钮没有width，它只是在toggleClass之后获得width，所以你需要为你的按钮设置一个静态宽度。
@RoryMcCrossan 是的，菜单会滑入和滑出，但覆盖层不会。叠加层只会滑入然后消失。它不会随着菜单顺利滑出。请原谅我没有添加所有相关的代码，对平台来说还是新的。将来肯定会包含它。
@Pedram 我删除了 jQuery 代码的缓动，只保留了元素上的过渡，但覆盖层仍然不能顺利滑出。通过为我的按钮设置一个静态宽度，你的意思是我应该为菜单按钮设置一个宽度吗？我不确定这将如何帮助解决这种情况。

标签： jquery css overlay transition

【解决方案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 并且不要将您的按钮变成覆盖。

【讨论】：

我明白你的意思。我认为更好的选择是为打开菜单时激活的叠加层添加一个活动类，而不是将按钮变成叠加层。