Добавление и удаление классов по клику

Vasilyyy · November 5, 2018

Доброго времени суток. Я начинающий в изучении 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);
    }
}

Edited November 5, 2018 by Vasilyyy

Vasilyyy · November 5, 2018

Что, если создать переменную и отслеживать ее значение? типа такого:

a = 0;
function q1() {
  addEventListerning('id');
  (сделать какую-нибудь анимацию с добавлением класса)
  a = 1;
  else {
  addEventListerning('id')
    (сделать какую-нибудь анимацию с добавлением класса, можно другую)
  }
}

Edited November 5, 2018 by Vasilyyy

Sign In

Добавление и удаление классов по клику

Question

Vasilyyy

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Vasilyyy

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information