使用三次贝塞尔计时函数，在一些 JS 中随着时间的推移在 CSS 中交错转换元素不透明度，为啥它只工作一次？
Posted
技术标签:
【中文标题】使用三次贝塞尔计时函数，在一些 JS 中随着时间的推移在 CSS 中交错转换元素不透明度，为啥它只工作一次？【英文标题】：Using a cubic bezier timing function, transitioning element opacity staggered over time in CSS with some JS, why does it work only once?使用三次贝塞尔计时函数，在一些 JS 中随着时间的推移在 CSS 中交错转换元素不透明度，为什么它只工作一次？ 【发布时间】：2017-05-07 16:02:42 【问题描述】：我目前正在尝试创建一个菜单叠加层，当用户按下角落的按钮时，它会填满屏幕。我希望菜单项以交错的顺序淡入，就像在此处的网站上所做的那样：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 的链接。
【问题讨论】：
我为你创建了一个 jsfiddle - jsfiddle.net/e1bkdkmj 【参考方案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 父项时才会发生转换。
CODEPEN
【讨论】：
【参考方案2】：您遇到的问题是，关闭菜单后，链接需要 2 秒才能完全过渡到 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;
【讨论】：
以上是关于使用三次贝塞尔计时函数，在一些 JS 中随着时间的推移在 CSS 中交错转换元素不透明度，为啥它只工作一次？的主要内容，如果未能解决你的问题，请参考以下文章