字体图标不会转换：旋转（180度）

Question

我希望我的移动菜单上的向下箭头旋转180度，并在点击时朝上。我还想动画旋转平稳过渡。我使用Javascript切换一个". js-Rotate"类在我的". fa-角-向下"字体-真棒类。

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:transform1s到“.fa角度向下”，但我没有运气。

CSS可通过以下链接的sass/组件/_navigation.scss获得：https://codepen.io/eliya33/project/editor/XpgvJo

Answer 1

这里发布的答案似乎解决了与转换简单转换相关的常见问题。由于未知原因，我的案例仍未解决，但我会选择这个问题作为答案，因为提供的解决方案应该适用于大多数案例。

Answer 2

我使用jQuery来触发onhtml函数，并使用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>