Потрясающие шрифты значки не будут преобразовывать переход: поворот (180 градусов) - PullRequest
Новая
       5

Потрясающие шрифты значки не будут преобразовывать переход: поворот (180 градусов)

0 голосов
/ 05 июня 2018

Мне бы хотелось, чтобы стрелки в моем мобильном меню поворачивались на 180 градусов и смотрели вверх при нажатии.Я также хотел бы анимировать вращение для плавного перехода.Я использую Javascript для переключения класса ".js-rotate" в моем классе ".fa-angle-down" font-awesome.

Последняя строка в функции JS управляет этим поведением: 

nav.addEventListener('click', (e) => {
  if (e.target.classList.contains('nav-list-drawer__btn')) {
    e.target.classList.toggle('js-nav-list-drawer__btn');
    e.target.nextElementSibling.classList.toggle('js-nav-list-drawer__list');
    e.target.parentElement.classList.toggle('js-nav-list-drawer');
    e.target.firstChild.classList.toggle('js-rotate'); // breaks  on IE11. Place last so code before it is parsed before the entire function breaks and pauses
  }
});

Я пытался добавить «transition: transform 1s;»на ".fa-angle-down", но мне не повезло.

CSS доступен через sass / components / _navigation.scss по следующей ссылке: https://codepen.io/eliya33/project/editor/XpgvJo

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Ответы, размещенные здесь, похоже, решают общие проблемы, связанные с переходом простых преобразований.Мое дело по-прежнему остается нерешенным по неизвестным причинам, но в любом случае я выберу этот вопрос в качестве ответа, поскольку предлагаемые решения должны работать в большинстве случаев.

0 голосов
/ 05 июня 2018

Я использовал jQuery для запуска функции onclick и CSS для применения эффекта перехода.Я думаю, что это работает безупречно. 

$(".button").click(function() {
  $("#arrow").toggleClass("rotate");
});
* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.button {
  height: 65px;
  width: 65px;
  background: whitesmoke;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#arrow {
  transition: all .5s ease-in-out;;
}

.rotate {
  transform: rotate(180deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <i id="arrow" class="fa fa-arrow-down fa-2x"></i>
</div>
...