开始/停止 webkit 动画 onclick 而不是 on:hover答案

【问题标题】：Start/Stop webkit animations onclick instead of on:hover开始/停止 webkit 动画 onclick 而不是 on:hover
【发布时间】：2016-06-09 13:49:40
【问题描述】：

当单击 .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;

&lt;a href="#" id="nav-toggle" class="menu"&gt;&lt;span onclick="showmenu('mobile-menu')+clickeffect('nav-toggle')"&gt;&lt;/span&gt;&lt;/a&gt;

【问题讨论】：

问题不清楚。 js 函数 showmenu 正在尝试访问元素 mobile-menu。这个元素在哪里定义？另外，为什么您在从未使用过的情况下将参数传递给 showmenu 和 clickeffect？

标签： javascript css animation menu webkit

【解决方案1】：

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

【讨论】：

像这样？
不确定“在菜单上切换课程”是什么意思