1

我目前正在尝试创建一个菜单叠加层，当用户按下角落的按钮时，它会填满屏幕。我希望菜单项以交错的顺序淡入，就像在此处的网站上所做的那样：http: //bravepeople.co/

我有大部分工作，但是菜单项仅在第一次按下菜单按钮时淡出，然后它们只是第二次弹出（第一项除外）。有人能弄清楚如何让它正常工作吗？

这是我在CodePen中的代码。

这是我的html：

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
<div id="menu"></div>
<div id="menu-button"></div>
<div id="menu-container">
    <div id="links">
        <a href="#Portfolio" id="portfolio">Portfolio</a><br />
        <a href="#Services" id="services">Services</a><br />
        <a href="#About" id="about">About</a><br />
        <a href="#Contact" id="contact">Contact</a><br />
    </div>
</div>

我的 CSS：

#menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 1;
    background-color: #111;
    -webkit-transition: width 0.5s, height 0.5s;
            transition: width 0.5s, height 0.5s;
}

#menu.active {
    width: 100%;
    height: 100%;
}

#menu-button {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 100px;
    height: 100px;
    background-color: #900;
    border: none;
    padding: 33px;
    right: calc(100% - 100px);
    -webkit-transition: left 0.5s, background-color 0.5s;
            transition: left 0.5s, background-color 0.5s;
    cursor: pointer;
}

#menu-button.active {
    left: calc(100% - 100px);
    right: 0;
    padding: 30px;
}

#menu-container {
    display: table;
    position: absolute;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 1;
    visibility: hidden;
}

#menu-container.active {
    visibility: visible;
}

#links {
    display: table-cell;
    vertical-align: middle;
    font-size: 40px;
    text-transform: uppercase;
}

#menu-container>#links>a {
    color: #fff;
    opacity: 0;
    -webkit-transition-timing-function: cubic-bezier(.81, .05, .75, .33);
            transition-timing-function: cubic-bezier(.81, .05, .75, .33);
}                                       

#menu-container.active>#links>a {
    opacity: 1;
}

#portfolio {
    -webkit-transition: opacity 0.5s;
            transition: opacity 0.5s;
}

#services {
    -webkit-transition: opacity 1s;
            transition: opacity 1s;
}

#about {
    -webkit-transition: opacity 1.5s;
            transition: opacity 1.5s;
}

#contact {
    -webkit-transition: opacity 2s;
            transition: opacity 2s;
}

和我的 Javascript：

let menu = {
    div: document.getElementById('menu'),
    button: document.getElementById('menu-button'),
    container: document.getElementById('menu-container'),
    isExpanded: false,
    adjust: function() {
        menu.isExpanded = !menu.isExpanded;
        if (menu.isExpanded) {
            menu.div.classList.add("active");
            menu.button.classList.add("active");
            menu.container.classList.add("active");
        } else {
            menu.div.classList.remove("active");
            menu.button.classList.remove("active");
            menu.container.classList.remove("active");
        }
    }
}
let links = document.getElementById('links').childNodes;

for (let i = 0; i < links.length; i += 1) {
    if (links[i].nodeName.toLowerCase() == 'a') {
        links[i].addEventListener('mouseup', menu.adjust);
    }
}

menu.button.addEventListener('mousedown', menu.adjust);

编辑：我忘了提到我的原始 HTML 使用来自 Bootstrap 的 CSS 文件，其中包含重置。我已经添加了一个引导 CDN 的链接。

4

2 回答 2

1

您遇到的问题是，关闭菜单后，链接需要 2 秒才能完全过渡到不透明度：0；根据过渡时间最长的那个。

如果您在 2 秒之前重新打开它，它将不起作用，但是您可以通过在关闭菜单后将转换时间设置为较小的值来解决此问题。

像这样，例如 JsFiddle

你可以编辑你的javascript来做到这一点

let menu = {
    div: document.getElementById('menu'),
    button: document.getElementById('menu-button'),
    container: document.getElementById('menu-container'),
    isExpanded: false,
    adjust: function() {
        menu.isExpanded = !menu.isExpanded;
        if (menu.isExpanded) {
            menu.div.classList.add("active");
            menu.button.classList.add("active");
            menu.container.classList.remove("finished");
            menu.container.classList.add("active");
        } else {
            menu.div.classList.remove("active");
            menu.button.classList.remove("active");
            menu.container.classList.add("finished");
            menu.container.classList.remove("active");
        }
    }
}
let links = document.getElementById('links').childNodes;

for (let i = 0; i < links.length; i += 1) {
    if (links[i].nodeName.toLowerCase() == 'a') {
        links[i].addEventListener('mouseup', menu.adjust);
    }
}  

menu.button.addEventListener('mousedown', menu.adjust);

并将其包含在您的 CSS 中

#menu-container.finished>#links>a {
    -webkit-transition: opacity 0.1s;
            transition: opacity 0.1s;
}
于 2016-12-22T05:57:52.530 回答
1

第一个答案很有意义，它很好地解释了代码中的问题。

还有另一种解决问题的方法，只需更改 CSS 中的一些代码。

.active #portfolio {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.active #services {
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.active #about {
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}

.active #contact {
  -webkit-transition: opacity 2.5s;
  transition: opacity 2.5s;
}

.active在菜单项之前添加类。这使得转换仅在菜单项具有.active父项时发生。

编解码器

于 2016-12-22T06:12:03.357 回答