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

在这里寻找一些帮助，使用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>

#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在单击时展开，然后当用户再次单击它时再次指向上

我希望它能很好地旋转到合适的位置

现在，它只是从上到下瞬间切换，但我想通过旋转它来设置过渡动画，使它看起来很漂亮和流畅

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

设置超时=>{ document.querySelector'i' .classList。添加“旋转” }, 1000 .轮换{ 变换：旋转180度； 转变：转变1s； }

---

我认为这可能是因为您试图将类应用于元素，而我认为jQuery无法做到这一点。请参阅以下答案：。解决此问题的一种方法是将元素包装在包含元素中，并对其进行转换。考虑这个示例，使用您在浏览器中呈现的代码，您可能需要在全屏上运行代码段：

$'student-change'。单击函数E{ $'blueCaret'.addClassrotated； console.log'it should turn'； 返回false； }; 蓝色插入符号{ 显示：内联块； 转换：转换200ms轻松； } .轮换{ -莫兹变换：旋转180度； -webkit变换：旋转180度； 变换：旋转180度； }

---

这是一种享受。我真的很惊讶，我没有偶然发现您链接的关于无法将类添加到SVG的问题。哎呀！

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