媒体查询-调整窗口大小时，响应性侧面菜单会出现并快速消失

Question

我创建了一个响应式侧面菜单，该菜单在调整浏览器窗口大小时出现。 我的“问题”如下：当我调整浏览器窗口的大小时，此侧边菜单出现并快速消失，而没有单击相应的按钮...在其他情况下，一切工作正常，只有这个问题困扰着我。

有谁能告诉我这个问题的来历？

 var btn = document.querySelector(".toggle-btn"); var nav = document.querySelector(".nav"); btn.addEventListener("click", function () { btn.classList.toggle("nav-open"); nav.classList.toggle("nav-open"); });

 @media screen and (max-width: 1300px) { html, body { margin: 0px; padding: 0px; } .toggle-btn { height: 30px; width: 30px; position: relative; float: right; top: 10px; right: 20px; cursor: pointer; z-index: 1000; } .toggle-btn span { height: 3px; background-color: #2c3e50; width: 100%; position: absolute; top: 20px; left: 0; transition: .4s; } .toggle-btn span:before { content: ''; height: 3px; background-color: #2c3e50; width: 100%; position: absolute; top: -10px; left: 0; transition: .4s; } .toggle-btn span:after { content: ''; height: 3px; background-color: #2c3e50; width: 100%; position: absolute; top: 10px; left: 0; transition: .4s; } .menu { height: 1000px; background-color: #eeebec; width: 250px; position: absolute; right: 0px; } .menu a { color: text-align: center; display: block; padding-top: 30px; } .nav { margin-right: -250px; transition-duration: 0.4s; } .nav-open { margin-right: 0px; transition-duration: 0.4s; } .toggle-btn.nav-open span { background: rgba(0, 0, 0, 0); } .toggle-btn.nav-open span:before { top: 0; transform: rotate(45deg); } .toggle-btn.nav-open span:after { top: 0; transform: rotate(-45deg); } }

 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Toggle Button</title> <link rel="stylesheet" href="btn.css"> </head> <body> <div class="toggle-btn"> <span></span> </div> <div class="menu nav"> Blah Blah Blah </div> <script src="btn.js"></script> </body> </html>

    transform: rotate(45deg);
}

.toggle-btn.nav-open span:after {
    top: 0;
    transform: rotate(-45deg);
}

}

Answer 1

过渡造成.4s延迟。从nav元素中删除过渡，您将不会获得延迟

.nav {margin-right：-250px; 过渡时间：0.4s； //删除此}

Answer 2

我认为FOUC（未样式化内容的闪烁）是由于菜单在menu类定义中的位置以及随后的.nav类定义的负边距声明引起的。

尝试将负边距移到.menu定义中：

.menu {
    height: 1000px;
    background-color: #eeebec;
    width: 250px;
    position: absolute;
    right: 0px;
    margin-right: -250px; /* <---- */
}

或者也许只是将.nav定义移到menu定义上方。 （尽管不清楚为什么要使用两个单独的类名来控制同一元素的布局。）

媒体查询-调整窗口大小时，响应性侧面菜单会出现并快速消失

问题描述

2 个解决方案

解决方案1
0 2018-05-17 16:44:15

解决方案2
0 已采纳 2018-05-17 16:49:53

媒体查询-调整窗口大小时，响应性侧面菜单会出现并快速消失

问题描述

2 个解决方案

解决方案1 0 2018-05-17 16:44:15

解决方案2 0 已采纳 2018-05-17 16:49:53

解决方案1
0 2018-05-17 16:44:15

解决方案2
0 已采纳 2018-05-17 16:49:53