1
私は現在、ユーザーがコーナーのボタンを押したときに画面に表示されるメニューオーバーレイを作成しようとしています。 http://bravepeople.co/キュービック・ベジェ・タイミング関数を使用すると、要素の不透明度を遷移させる要素の不透明度がCSSで時間的にずれることがあります。
メニューの項目は、最初にメニューボタンが押されたときにのみ消えてしまいますが、これはほとんどの場合、消えてしまいます。その後、2回目のポップアップが表示されます（最初の項目は例外です）。誰かがこれを正しく動作させる方法を見つけ出すことができますか？
ここに私のコードは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は、CSSファイルを使用していることを言及するのを忘れてしまいましたリセットを含むブートストラップから。それ以来、ブートストラップCDNへのリンクを追加しました。
私はyaのためにjsfiddleを作成している - https://jsfiddle.net/e1bkdkmj/ –