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;

toggle类的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转换设置？

Answer 1

它返回到您的代码和yor UI 逻辑，因为您将按钮设置为叠加，因此当您的班级有width但元素没有时，它就不会播放transition对。{/ p>

卸下：

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，不要将按钮设置为叠加层。

滑动切换类

1 个答案: