Множественные действия для одной кнопки
Пытаюсь сделать полноэкранное меню как модальное. Все нормально, кроме анимации fadeOut. Может кто-нибудь объяснить, что не так с моими скриптами / кодами? Я хочу, чтобы этот контент плавно появлялся при нажатии кнопки, но исчезает при повторном нажатии. Мой сценарий устанавливает значение «display», но в анимации отлично работает только эффект постепенного изменения. При обратном затухании эффект мгновенно (без продолжительности анимации 0,5 с). У кнопки z-index = 101 и menu-content = 100, поэтому кнопка все время остается на одном месте.
Спасибо
function myMenu() {
var x = document.getElementById("menu-content");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
if (x.style.animation === "fadeIn 0.5s ease-in-out") {
x.style.animation = "fadeOut 0.5s ease-in-out";
} else {
x.style.animation = "fadeIn 0.5s ease-in-out";
}
}#menu-content {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
animation: fadeOut 0.5s ease-in-out;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}<button id = "menu-button" style = "z-index: 101; position: absolute; top: 0;
left: 0;" onclick = "myMenu();">Menu</button>
<div id = "menu-content"></div>
<div id = "menu-content">
<div class = "menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>Да, конечно, он уже отредактирован, извините.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хорошо, есть пара проблем.
Во-первых, в вашем HTML есть 2 элемента с одинаковым идентификатором (menu-content), которые вызовут несколько проблем, поэтому удалите один из них.
Во-вторых, когда вы устанавливаете display: none в своей функции myMenu, он будет немедленно скрыт, поэтому анимация не отображается.
У вас есть несколько вариантов:
Поместите этот код в
setTimeout, чтобы он не был установлен наdisplay: noneдо завершения анимации, ИЛИНе используйте
display: none
Лично я считаю, что вам лучше не использовать display: none, иначе вам нужно будет вносить поправки в свой javascript всякий раз, когда вы меняете продолжительность анимации.
Мне удалось заставить его работать без необходимости отображения none и с использованием переходов CSS, которые работают довольно хорошо
function myMenu() {
var x = document.getElementById("menu-content");
if (x.classList.contains("open")) {
x.classList.remove("open");
} else {
x.classList.add("open");
}
}#menu-content {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
#menu-content.open {
opacity: 1;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}<button id = "menu-button" style = "z-index: 101; position: absolute; top: 0;
left: 0;" onclick = "myMenu();">Menu</button>
<div id = "menu-content">
<div class = "menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>Ты великолепен. Теперь все работает отлично. Большое спасибо!
@ownidea Рад, что смог помочь
Не могли бы вы добавить все соответствующие CSS, такие как
@keyframes, и, возможно, HTML дляmenu-content?