javascript - font-awesome 图标不会转换转换 :rotate(180deg)

Question

我希望我的移动菜单上的向下箭头旋转 180 度并在点击时面朝上。我还想为旋转设置动画以实现平滑过渡。我正在使用 Javascript 在我的“.fa-angle-down”font-awesome 类上切换“.js-rotate”类。

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

Answer 1

我使用 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>