使用三次贝塞尔计时函数，在CSS 中使用某些 JS 过渡元素不透明度随时间交错，为什么它只工作一次？

Question

我目前正在尝试创建一个菜单叠加层，当用户按下角落的按钮时它会填满屏幕。我希望菜单项以交错的顺序淡入，就像在此处的网站上所做的那样：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 文件，其中包含一个重置。我已经将 link 添加到 Bootstrap CDN。

Answer 1

你遇到的问题是关闭菜单后链接需要2s才能完全过渡到opacity: 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;
}

Answer 2

第一个回答很有道理，很好的解释了你代码中的问题。

还有另一种解决问题的方法，只需更改 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 class。这使得仅当菜单项具有 .active 父项时才会发生转换。

CODEPEN

使用三次贝塞尔计时函数，在CSS 中使用某些 JS 过渡元素不透明度随时间交错，为什么它只工作一次？

Using a cubic bezier timing function, transitioning element opacity staggered over time in CSS with some JS, why does it work only once?

html

css

opacity

css-transitions

cubic-bezier