媒体查询 - 当我调整 window 大小时，响应式侧边菜单会快速出现和消失

Question

我创建了一个响应式侧边菜单，它会在我调整浏览器大小时出现 window。我的 "problem" 是这样的：当我调整浏览器 window 大小时，这个侧边菜单出现和消失很快，没有点击相应的按钮... 在其他情况下，一切都很好，只是这个问题困扰着我。

谁能告诉我这个问题是从哪里来的？

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 delay.Remove 从导航元素过渡，您不会得到延迟

.导航{ 右边距：-250px；过渡持续时间：0.4s； //删除这个 }

Answer 2

我认为 FOUC（无样式内容的闪现）是由 menu class 定义中的菜单定位以及 [=12= 的后续负边距声明引起的] class定义。

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

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

或者只是将 .nav 定义移动到 menu 定义之上。（虽然不清楚为什么要使用两个单独的 class 名称来控制同一元素的布局。）

媒体查询 - 当我调整 window 大小时，响应式侧边菜单会快速出现和消失

Media Queries - Reponsive side menu appears and disappears quickly when I resize the window

html

javascript

css

media-queries

side-menu