折叠/展开时动画字体真棒雪佛龙图标旋转

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 并尽可能使用它来创建动画。您会发现它更容易，而且性能也更好。