javascript - 启动/停止 webkit 动画 onclick 而不是 :hover

Question

当单击 .menu 而不是将其悬停时，我在启动动画时遇到了一些问题。我的函数 clickeffect 中应该包含什么来启动 onclick 动画？

它不会让我发布问题，所以这里还有一些话。

function showmenu(){
	var menu = document.getElementById('mobile-menu'), maxH="148px";
	if (menu.style.height == maxH){
		menu.style.height = "0px";

	}else{
		menu.style.height = maxH;
	}
}

function clickeffect(){
	var burgermenu = document.getElementByClassName('menu');
}

.menu {
	position: relative;
	display:  inline-block;
	width: 30px;
	height: 30px;
	margin: 25px;
}
.menu span {
	margin: 0 auto;
	position: relative;
	top: 12px;
}
.menu span:before, .menu span:after {
	position: absolute;
	content: '';
}
.menu span, .menu span:before, .menu span:after {
	width: 30px;
	height: 6px;
	background-color: white;
	display: block;
}
.menu span:before {
	margin-top: -12px;
}
.menu span:after {
	margin-top: 12px;
}

.menu span {
	-webkit-transition-duration: 0s; transition-duration: 0s;
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.menu:hover span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.menu span:before {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.menu:hover span:before {
	margin-top: 0;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.menu span:after {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.menu:hover span:after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;

<a href="#" id="nav-toggle" class="menu"><span onclick="showmenu('mobile-menu')+clickeffect('nav-toggle')"></span></a>

Answer 1

单击时，在 .menu 上切换一个类，比如说 active。然后在您的 CSS 中，将 .menu:hover 更改为 .menu.active