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 个答案: