Проблема с анимацией: проигрывается только один раз. Как лучше реализовать?

Question

[Роман Родионов]

Здравствуйте, друзья!
Я недавно закончил изучать книгу Head First "изучаем программирование на JavaScript".
Для практики разрабатываю веб сайт с использованием чистого JS.
При нажатии на сендвич кнопку запускается анимация(кнопка и логотип уменьшаются и перемещаются, а сверху вылезает меню).
Проблема в том, что при нажатии второй и последующие разы, анимация должна воспроизводиться в обратном порядке, но все возвращается на свои места без анимации.
Пожалуйста, подскажите, в чем здесь проблема, а также более удобный способ для реализации сие на чистом JS и CSS.
Реализовано вот так:

<div id="sandwich" onclick="animateSandwichMenu()">
				<div id="upper-line"></div>
				<div id="middle-left-line"></div>
				<div id="middle-right-line"></div>
				<div id="bottom-line"></div>
			</div>

			<!--******************  Navigation menu  *****************-->
			<nav id="nav" class="nav">
				<ul>
					<li><a href="#">ABOUT</a></li>
					<span>\\</span>
					<li><a href="#">TEAM</a></li>
					<span>\\</span>
					<li><a href="#">SERVICES</a></li>
					<span>\\</span>
					<li><a href="#">WORKS</a></li>
					<span>\\</span>
					<li><a href="#">BLOG</a></li>
					<span>\\</span>
					<li><a href="#">CONTACT</a></li>
				</ul>
			</nav>

/************************SANDWICH MENU ANIMATION*************************/
var menuOn = false;
function animateSandwichMenu() {
	var lines = document.getElementById('sandwich').childNodes;
	/*Get style attribute value*/
	function getStyleValue(animationClassName) {
		/*Set animation-direction*/
		function getAnimDirection() {
			if (!menuOn) {return 'normal';}
			else {return 'reverse';}
		}
		/*Return value*/
		return 'animation-name: ' + animationClassName + '; ' +
				 	 'animation-fill-mode: both; ' +
					 'animation-duration: 1s; ' +
					 'animation-direction: ' + getAnimDirection() + ';';
	}
	/*Sandwich lines animation*/
	for (var i = 0; i < lines.length; i++) {
		if (lines[i] instanceof(HTMLDivElement)) {
			var animationClassName = lines[i].id + "-animation";
			lines[i].setAttribute('style', getStyleValue(animationClassName))
		}
	}
	/*Other animation*/
	var elementsId = ['sandwich',
										'logo',
										'menu-for-mobile',
										'nav'];
	for (var i = 0; i < elementsId.length; i++ ) {
		addStyle(elementsId[i], elementsId[i] + '-animation');
	}

	function addStyle(elementId, animationClassName) {
		var elem = document.getElementById(elementId);
		elem.removeAttribute('style');
		console.log(elem);
		elem.setAttribute('style', getStyleValue(animationClassName));
	}
	/*Toggle*/
	menuOn = !menuOn;
}

Answer 1

[Роман Родионов]

Помучился и сделал!
Оказывается, анимация не завершает свое действие, а просто останавливается. Поэтому не проигрывается по второму клику в обратном направлении.
Один из способов, чтобы ее остановить:
1)Клонировать элемент, на котором повешено событие, предварительно удалив из него атрибут style.
2)Удалить сам этот элемент.
3)Вставить вместо него его клон.
Вот решение для моего кода:

function addStyle(elementId, animationClassName) {
...
		var elem = document.getElementById(elementId);
		var father = elem.parentNode;
		elem.removeAttribute('style');
		var newElem = elem.cloneNode(true);

		elem.parentNode.removeChild(elem);
		father.appendChild(newElem);
		newElem.setAttribute('style', getStyleValue(animationClassName));
	}