Плавное изменение размера блока
 

Доброго дня! Нужен по большей части просто блок, который по клику плавно изменяет размер блока (меню, к примеру). У меня есть такой код (писал не полностью сам, логику подсмотрел где-то на этом же форуме).

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. Не извращения ради, но тренировки для.

Заранее огромное спасибо!

sandcrawler,
может css добавить тогда хватит смены класса