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

Question

在这里使用FA5（带有JS的SVG）和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，为什么我不能添加类？ 。 解决此问题的一种方法是将<svg>包装在一个包含元素中，然后对其进行转换。 考虑使用您说的在浏览器中呈现的代码的此示例，您可能需要全屏运行代码段：

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

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

 <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> 

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" />