启动/停止webkit动画onclick而不是on：hover

Question

在点击.menu而不是徘徊时，我在启动动画时遇到了一些麻烦。什么应该在我的函数clickeffect中启动动画onclick？

它不允许我发布这个问题，所以这里有更多的话。

＆＃13;

＆＃13;

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');
}

＆＃13;

.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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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