font-awesome 图标不会过渡 transform:rotate(180deg)答案

【问题标题】：font-awesome icons will not transition transform:rotate(180deg)font-awesome 图标不会过渡 transform:rotate(180deg)
【发布时间】：2018-06-05 14:06:15
【问题描述】：

我希望移动菜单上的向下箭头旋转 180 度并在点击时面朝上。我还想为旋转设置动画以实现平滑过渡。我正在使用 Javascript 在我的“.fa-angle-down”字体真棒类上切换“.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
  }
});

我尝试添加“过渡：变换 1s；”到“.fa-angle-down”，但我没有运气。

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

【问题讨论】：

不确定如何复制 codepen 项目或使其不是只读的
一定要JS吗，可以用CSS吗？
啊。完全可以理解，因为我也不确定哈哈。
@Jordan.J.D 你可以在顶部菜单中分叉它。
每次单击按钮时都会触发转换，因此如果它已经旋转，它将从 0 度重新开始并旋转回 180 度，而不是相反。您可能会看到那里发生了什么。看看我的回答:)

标签： javascript html css font-awesome

【解决方案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>

【讨论】：

嗯，我的还是不行。哎呀，大脑太炸了，无法工作。不过还是谢谢你的回答:)
是的，您的代码 sn-p 工作正常，只是当我应用相同的原理时，我的问题仍然存在。
我在 fork 你的项目时无法加载 .scss 文件，所以很遗憾我无法深入研究这个问题，抱歉。

【解决方案2】：

此处发布的答案似乎解决了与转换简单转换相关的常见问题。由于未知原因，我的案件仍未解决，但无论如何都会选择此问题作为已回答的问题，因为所提供的解决方案应该适用于大多数情况。

【讨论】：