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

Posted 2023-03-06

【中文标题】折叠/展开时动画字体真棒雪佛龙图标旋转

【英文标题】：Animate Font Awesome Chevron icon rotation on collapse/expand

【发布时间】：2018-10-01 15:37:20

【问题描述】：

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

这是我添加 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 对我来说太混乱了

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

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

【讨论】：

抱歉，这并没有改变任何东西。我创建了 css 文件，并在 Crome 调试器中看到应用了该样式。尽管如此，它只是在没有过渡的情况下发生了变化。可能是因为我正在添加一个类 (fa-rotate-90) 而不是修改某些属性，因此浏览器看不到它如何将一种表示转换为另一种表示？换句话说，可能我必须修改 transform: rotate(90deg); 而不是添加那个 F.A. 类？