javascript - 折叠/展开时动画字体 Awesome Chevron 图标旋转

Question

我希望我的图标在隐藏或显示可折叠内容时明显旋转。

这是我添加 V 形图标并旋转它的函数:

$('[data-toggle="collapse"]').each(function(){
    var collapser = $(this);
    // TODO: 'collapsed' class should be added manually if the toggled element is not shown
    // i.e., if you remove 'show' class, add 'collapsed' class, or this function is confused
    collapser.append('<span style="float:right;"><i class="fa fa-chevron-right'
            +(collapser.hasClass('collapsed')?'':' fa-rotate-90')
            +'"/></span>');
    collapser.on('click', function(){
        var chevron = collapser.find('.fa-chevron-right'); // it was replaced with svg
        if (collapser.hasClass('collapsed')) {
            chevron.addClass('fa-rotate-90');
        } else {
            chevron.removeClass('fa-rotate-90');
        }            
    });
});

我想通过仅修改此代码来添加更平滑的过渡，但不使用 css 会更好。 CSS 对我来说太困惑了

欢迎对本代码提出任何其他批评

Answer 1

为了使动画更流畅，您可以使用 css transition 属性。

只需将此代码添加到您的 CSS 中:

.fa-chevron-right {
  -webkit-transition: transform .4s; /* Safari */
  transition: transform .4s;
}

或者您可以通过修改代码 appending element 直接使用 jQuery 添加 CSS(不推荐):

 collapser.append('<span style="float:right;"><i style="transition: transform .4s;" class="fa fa-chevron-right'
    +(collapser.hasClass('collapsed')?'':' fa-rotate-90')
    +'"/></span>');

您可以在此处了解有关 CSS transitions 的更多信息: https://www.w3schools.com/css/css3_transitions.asp

一般来说，我建议您学习 CSS 并尽可能使用它来创建动画。您会发现它变得更加容易，并且您获得了更好的性能。