如何使用 JS 为 Font Awesome 图标制作动画？

Question

所以，我看到你们中的很多人使用 span 或 JQuery 库与 "designed icons" 合作，但我使用的是 Font Awesome 图标，我无法使它起作用。

我只是想尽可能简单地使用 toggleClass JS，所以就这样吧。

$(document).ready(function(){
 $('#menunav').click(function(){
  $(this).toggleClass('action');
 });
});

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#menunav{
        padding: 40px;
        width: 30%;
        font-size: 50px;
        cursor: pointer;
        -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
}

#menunav i{
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
}

#menunav .action i{
    -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="burguer-style.css">
    <!--font awesome library-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="jquery-1.11.3.js"></script>
    <script src="burguer-action.js" type="text/javascript"></script>
</head>
<body>
    <div id="menunav">
        <i class="fa fa-navicon"></i>
    </div>
</body>
</html>

Answer 1

你想多了，看fiddle：https://jsfiddle.net/36zo44md/

html

<div id="menunav">
  <i id="faIcon" class="fa fa-navicon"></i>
</div>

css

#menunav{
        padding: 40px;
        width: 30%;
        font-size: 50px;
}

.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

javascript

  $(document).ready(function() {
    $('#faIcon').click(function() {
      $(this).toggleClass('fa-rotate-90');
    });
  });

如何使用 JS 为 Font Awesome 图标制作动画？

How to animate Font Awesome icons using JS?

javascript

jquery

html

css

font-awesome