Доброго времени суток. Я начинающий в изучении JavaScript. Во время моих уроков я столкнулся с проблемой, которую не могу решить уже 4 дня. Она состоит в том, что при первом клике значок переворачивается на 180 градусов направо, а по следующему клику он должен крутиться в реверсе. В чем я допустил ошибку? Вот код, который я использовал в письменном виде:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="animStart" onclick="itemSpin();itemSpinRev();"><span id="burger">☰</span></button>
<script type="text/javascript">
function itemSpin(normal) {
animStart.classList.add('anim');
var start = getMilliseconds(ms);
var spinner = getMilliseconds(ms) - start;
if(spinner >= 400) {
animStart.classList.remove('anim');
// animStart.classList.add('animate');
// // animStart.classList.toggle('animate');
} };
function itemSpinRev(reverse) {
animStart.classList.add('animate');
var start = getMilliseconds();
var reverse = getMilliseconds() - start;
if(reverse >= 400) {
animStart.classList.remove('animate');
} };
</script>
</body>
</html>
body {
background: #4f5a6e;
margin: 0;
padding: 0;
}
#animStart {
position: absolute;
background-color: #4f5a6e;
margin-left: 10px;
margin-top: 10px;
border: none;
font-size: 20px;
cursor: pointer;
outline: none;
}
#animStart.anim {
animation-name: spin;
animation-duration: 0.4s;
animation-timing-function: linear;
}
#animStart.animate {
animation-name: spin;
animation-duration: 0.4s;
animation-timing-function: linear;
animation-direction: reverse;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
