0

Нужно, чтобы по клику кнопка открывала выпадающее меню и по окончании анимации, поворачивалась на 180 градусов. Также, при повторном клике на неё, меню должно закрыться, а кнопка развернуться обратно. Дело в том, что анимация срабатывает только один раз, а кнопка не прокручивается. Далее код с ошибкой:

$(document).ready(function() {
  $('nav').hide();
  $('#menu-click').click(function() {
    $('nav').slideToggle(1000);
    this.className = this.className == 'down' ? 'up' : 'down';
  });
});
nav {
  display: block;
  padding: 30px;
  border-bottom: 1px solid #c0c0c0;
  margin: 20px 0 10px 0;
}

#menu-click {
  position: relative;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.down {
  animation: rotate 1s 1 forwards;
}

.up {
  animation: rotate 1s 1 backwards reverse;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a>Ссылка 1</a>
  <hr>
  <a>Ссылка 2</a>
  <hr>
  <a>Ссылка 3</a>
  <hr>
  <a>Ссылка 4</a>
</nav>
<button class="none" id="menu-click">\/</button>

1 ответ 1

1

Добавил ещо одну анимацию для возврата в положение transform: rotate(0deg);

$(document).ready(function() {
  $('nav').hide();
  $('#menu-click').click(function() {
    $('nav').slideToggle(1000);
    this.className = this.className == 'down' ? 'up' : 'down';
  });
});
nav {
  display: block;
  padding: 30px;
  border-bottom: 1px solid #c0c0c0;
  margin: 20px 0 10px 0;
}

#menu-click {
  position: relative;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.down {
  animation: rotate 1s 1 forwards;
}

.up {
  animation: rotateRever 1s 1 forwards;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes rotateRever {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a>Ссылка 1</a>
  <hr>
  <a>Ссылка 2</a>
  <hr>
  <a>Ссылка 3</a>
  <hr>
  <a>Ссылка 4</a>
</nav>
<button class="none" id="menu-click">\/</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.