document.addEventListener("DOMContentLoaded", () => {
const $navTogglers = Array.prototype.slice.call(
document.querySelectorAll(".nav-toggler"),
0
);
if ($navTogglers.length > 0) {
$navTogglers.forEach((el) => {
const target = el.dataset.target;
const menu = document.getElementById(target);
let originalHeight = menu.offsetHeight;
let height = 0;
menu.style.height = height;
el.addEventListener("click", () => {
if (height) {
function frame() {
height -= 4;
menu.style.height = height + "px";
if (height <= 0) {
clearInterval(id);
}
}
var id = setInterval(frame, 2);
} else {
function frame() {
height += 4;
menu.style.height = height + "px";
if (height >= originalHeight) {
clearInterval(id);
}
}
var id = setInterval(frame, 2);
}
});
});
}
});<div class="hidden "> для меню, которое заплывает-выплывает. Хотелось бы понять, каким все-таки образом тогда работает $(target).animate({ height: "toggle" }); и заставляет меню медленно появляться, если displayне анимируется? .hidden соответствует display: none;. Если через classList.toggle добавлять и удалять класс hidden у меню, то изменения будут происходить мгновенно, разве нет? Тут либо элемент спрятан, либо отображается.transition: all 1.5s ease-in-out;. Но оно все так же появляется и исчезает моментально. Следовательно, $(target).animate({ height: "toggle" }); работает как-то по-другому, но я не пойму, как именно... и почему height?