我試圖讓導航鏈接在您打開導航時慢慢淡入，并在您單擊導航上的關閉時立即消失。目前，它會立即顯示鏈接，并在鏈接關閉時繼續顯示。也許 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;}
2 回答
白豬掌柜的
TA貢獻1893條經驗 獲得超10個贊
如果我正確理解您的要求，您想要一個計時器滑塊進出嗎？如果是這樣，你必須在課堂上正確設置計時器'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>
肥皂起泡泡
TA貢獻1829條經驗 獲得超6個贊
我制作了一個簡單的淡入動畫，您可以element.classList.add("fadeIn")在打開導航時通過類 ( ) 將其附加到任何元素，并element.classList.remove("fadeIn")在導航關閉時將其刪除 ( )。為了立即隱藏文本，您可以創建一個hidden類，display: none以相同的方式使用它。
.fadeIn{
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn{
from {
opacity:0
}
to {
opacity:1
}
}
- 2 回答
- 0 關注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消