Question

在这里寻找一些帮助，使用FA5（SVG w / JS）和Jquery为图标设置动画，以便在点击元素时旋转180.

我的HTML看起来像这样：

        <div class="card-block">
            <a id="student-change" data-toggle="collapse" href="#classBreakdownPanel" role="button" aria-expanded="false" aria-controls="classBreakdownPanel">
                <div class="row">
                    <div class="col">
                        <span class="card-text text-primary">View details</p>
                    </div>
                    <div class="col">
                        <i id="blueCaret" class="fas fa-2x blue-caret fa-caret-circle-up float-right"></i>
                    </div>
                </div>
            </a>
        </div>

在浏览器中渲染时，它变为：

        <div class="card-block">
            <a id="student-change" data-toggle="collapse" href="#classBreakdownPanel" role="button" aria-expanded="false" aria-controls="classBreakdownPanel" class="collapsed">
                <div class="row">
                    <div class="col">
                        <span class="card-text text-primary">View details<p></p>
                    </span></div>
                    <div class="col">
                        <svg id="blueCaret" class="svg-inline--fa fa-caret-circle-up fa-w-16 fa-2x blue-caret float-right" aria-hidden="true" data-prefix="fas" data-icon="caret-circle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm379.5 27.5l-123-123c-4.7-4.7-12.3-4.7-17 0l-123 123c-7.6 7.6-2.2 20.5 8.5 20.5h246c10.7 0 16.1-12.9 8.5-20.5z"></path></svg><!-- <i id="blueCaret" class="fas fa-2x blue-caret fa-caret-circle-up float-right"></i> -->
                    </div>
                </div>
            </a>
        </div>

CSS看起来像这样：

#blueCaret{
    transition-duration: 0.8s;
    transition-property: transform;
}
.rotated{
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

和一些非常简单的jquery：

    $('#student-change').click(function(){
        $('#blueCaret').toggleClass("rotated");
        console.log('it should turn');
    });

这样做的方法是，图标从加载时指向上方，当点击下方的div展开时向下，然后当用户再次点击它时再次指向。

我希望它很好地旋转到位置。

现在它实际上只是瞬间从上到下切换 - 但是我希望通过旋转来设置转换的动画，使它看起来很漂亮和流畅。

我确定我遗漏了一些简单的东西，但我似乎无法找到如何做到这一点。

Answer 1

我相信这可能是因为您尝试将类应用于<svg>元素，我相信jQuery无法做到。请参阅以下答案：jQuery SVG, why can't I addClass?。解决这个问题的一种方法是将<svg>包装在一个包含元素中并转换它。使用您说在浏览器中呈现的代码来考虑此示例，您可能需要以全屏模式运行代码段：

＆＃13;

$('#student-change').click(function(e) {
  $('#blueCaret').addClass("rotated");
  console.log('it should turn');
  return false;
});

＆＃13;

#blueCaret {
  display: inline-block;
  transition: transform 200ms ease;
}

.rotated {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div class="card-block">
  <a id="student-change" data-toggle="collapse" href="#classBreakdownPanel" role="button" aria-expanded="false" aria-controls="classBreakdownPanel" class="collapsed">
    <div class="row">
      <div class="col">
        <span class="card-text text-primary">View details<p></p>
                    </span></div>
      <div class="col">
        <div id="blueCaret">
          <svg class="svg-inline--fa fa-caret-circle-up fa-w-16 fa-2x blue-caret float-right" aria-hidden="true" data-prefix="fas" data-icon="caret-circle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm379.5 27.5l-123-123c-4.7-4.7-12.3-4.7-17 0l-123 123c-7.6 7.6-2.2 20.5 8.5 20.5h246c10.7 0 16.1-12.9 8.5-20.5z"></path></svg></div>
      </div>
    </div>
  </a>
</div>

＆＃13;

Answer 2

setTimeout(() =>{
  document.querySelector('i')
    .classList.add('rotate')
}, 1000)

.rotate {
  transform: rotate(180deg);
  transition: transform 1s;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<i class="fa fa-caret-up" />

FontAwesome5（带有JS的SVG）和Jquery将图标旋转（动画）180度

2 个答案: