当导航滑动打开和关闭时切换文本淡入淡出

Question

我试图让导航链接在你打开导航时慢慢消失，并在你点击关闭导航时立即消失。目前，它会立即显示链接，并在链接关闭时继续显示。

也许jQuery切换？或者CSS中有什么我可以做的吗？

代码笔：https://codepen.io/mattmcgilton/pen/GRJVBxz

<div class="col-4 d-flex flex-column align-items-end">
<button id="open-btn" onclick="openNav()">Menu</button>
</div>    

<nav class="primary__nav">
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>
<div class="container overlay-content">
<ul>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
</ul>
</div>
</div>
</nav>

function openNav() {
document.getElementById("myNav").style.width = "100%";
document.getElementById("open-btn").style.display = "none";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("open-btn").style.display = "block";
}

body {
background-color: gray;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
margin-top: 30px;
ul {
padding-left: 0;
li {
padding-bottom: 5rem;
}
}
}
.overlay a {
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
color: red;
display: block;
transition: 0.3s;
letter-spacing: 5px;
@include bodyLight();
}
.overlay .closebtn {
position: absolute;
top: 50px;
right: 70px;
@include bodyBold();
font-size: 12px;
color: black;
}

Answer 1

如果我正确理解你的要求，你想有一个定时器滑块进出吗？如果是这样，则必须在'overlay类中正确设置计时器。目前我已将其设置为2秒。

function openNav() {
$(".overlay-content").fadeIn(2000);
document.getElementById("myNav").style.width = "100%";
document.getElementById("open-btn").style.display = "none";
}
function closeNav() {
$(".overlay-content").fadeOut(500);
document.getElementById("myNav").style.width = "0%";
document.getElementById("open-btn").style.display = "block";
}

body {
background-color: gray;
}
elementToFadeInAndOut {
animation: fadeInOut 4s linear forwards;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
transition: 2s;
/* here */
}
.overlay-content {
position: relative;
top: 25%;
margin-top: 30px;
display:none;
ul {
padding-left: 0;
li {
padding-bottom: 5rem;
}
}
}
.overlay a {
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
color: red;
display: block;
transition: 0.3s;
letter-spacing: 5px;
@include bodyLight();
}
.overlay .closebtn {
position: absolute;
top: 50px;
right: 70px;
@include bodyBold();
font-size: 12px;
color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col-4 d-flex flex-column align-items-end">
<button id="open-btn" onclick="openNav()">Menu</button>
</div>
<nav class="primary__nav">
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>
<div id="hide" class="container overlay-content">
<ul>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
<li>this is text 123</li>
</ul>
</div>
</div>
</nav>

Answer 2

我制作了一个简单的淡入动画，您可以在打开导航时通过类(element.classList.add("fadeIn")(将其附加到任何元素，并在关闭导航时将其移除(element.classList.remove("fadeIn")(。为了立即隐藏文本，您可以创建一个具有display: none的hidden类，并以相同的方式使用它。

.fadeIn{
animation: fadeIn 1s ease-in;
}

@keyframes fadeIn{
from {
opacity:0
}
to {
opacity:1
}
}