Доброго дня! Нужен по большей части просто блок, который по клику плавно изменяет размер блока (меню, к примеру). У меня есть такой код (писал не полностью сам, логику подсмотрел где-то на этом же форуме).
var toggle_menu = document.querySelector('.menu-mini');
toggle_menu.addEventListener("click", function(){
toggleBlock('.main_menu', 200);
});
}
function toggleBlock(css, height) {
var block = document.querySelector(css);
var display = getCss(block, 'display');
if(display == 'block') {
var cur_hei = height;
var hei = 0;
block.style.height = height + 'px';
var interval = setTimeout(function go() {
block.style.height = (parseInt(block.style.height) - 10) + 'px';
if(parseInt(block.style.height) > hei) {
setTimeout(go, 50);
}
else {
block.style.display = 'none';
}
}, 50);
}
else if(display== 'none') {
var cur_hei = 0;
var hei = height;
block.style.height = '0px';
block.style.display = 'block';
var interval = setTimeout(function go() {
block.style.height = (parseInt(block.style.height) + 10) + 'px';
if(parseInt(block.style.height) < hei) {
setTimeout(go, 50);
}
}, 50);
}
}
function getCss(node, prop) {
return getComputedStyle(node).getPropertyValue(prop);
}
Он работает, но очень неправильно. В инспекторе размер меняется, однако с отображением беда. Все происходит резко, некрасиво, рывками. При закрытии display:block наступает раньше, чем height доходит до нуля.
Я знаю, что это делается на jQuery несколькими строчками. Но мне принципиально добиться того же на чистом JS. Не извращения ради, но тренировки для.
Заранее огромное спасибо!
