[英]How to get rid of delay between clicking on button and execution of animation?
我正在創建一個漢堡菜單。 單擊按鈕后,我有菜單顯示和隱藏的動畫。 當我單擊按鈕以顯示菜單時,一切都很好,但是當我單擊它以隱藏它時,會出現延遲(並且延遲等於 animation 時間)。 我已經嘗試了一切來擺脫這種延遲,但沒有任何效果。
@keyframes appear {
from {
max-height: 0;
}
to {
max-height: 100vh;
}
}
@keyframes hide {
from {
max-height: 100vh;
}
to {
max-height: 0;
}
}
.header__menu{
position: absolute;
left: 0;
top: 2.6em;
flex-direction: column;
width: 100vw;
color: #fff;
text-transform: lowercase;
@include concert-one;
font-size: 1.8rem;
background-color: $violet;
text-align: center;
overflow: hidden;
display: none;
}
和JS
hamburgerMenu.style.display = "none";
hamburgerButton.addEventListener("click", () => {
if (hamburgerMenu.style.display == "none") {
hamburgerMenu.style.animation = "appear 1s ease-in both";
hamburgerMenu.style.display = "flex"
} else if (hamburgerMenu.style.display == "flex") {
hamburgerMenu.style.animation = "hide 1s ease-in both";
setTimeout(() => {
hamburgerMenu.style.display = "none";
}, 1000);
}
})
我看到您將 setTimeout 設置為 1 秒。 您可以將其減少到幾分之一秒。 這應該有效。
嘗試這個:
hamburgerMenu.style.display = "none";
hamburgerButton.addEventListener("click", () => {
if (hamburgerMenu.style.display == "none") {
hamburgerMenu.style.animation = "appear 1s ease-in both";
hamburgerMenu.style.display = "flex"
} else if (hamburgerMenu.style.display == "flex") {
hamburgerMenu.style.animation = "hide 1s ease-in both";
setTimeout(() => {
hamburgerMenu.style.display = "none";
}, 100);
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.