动画引导字形图标

Posted 2023-03-06

【中文标题】动画引导字形图标

【英文标题】：Animating Bootstrap glyphicons

【发布时间】：2016-07-23 23:01:03

【问题描述】：

我在 bootstrap 手风琴中使用 bootstrap glyphicon-triangle-left 和 glyphicon-triangle-bottom glyphicons。当你打开一个 div 时，它会显示 bottom 一个，当你关闭它时，它会显示 left 一个。

当图标切换类时，它看起来有点愚蠢，所以我想创建一个过渡，可能会使图标旋转或淡出/淡入。 但我不确定我该怎么做，因为我通过 jQuery 在类之间切换，如下所示：

function toggleChevron(e) 
    jQuery(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('glyphicon-triangle-bottom glyphicon-triangle-left');
    

我不确定我该怎么做，因为它使用了 bootstrap 手风琴等中的类。

我尝试在我的 css 文件中做这样的事情，但它并没有真正做到我想要它做的事情：p

.glyphicon-triangle-bottom
    opacity: 0;
    transition: opacity 1s;


.glyphicon-triangle-left
    opacity: 1;
    transition: opacity 1s;

有人知道如何使图标过渡吗？ 非常感谢提前！

编辑：我稍微定制了这段代码，但这很好地代表了我的手风琴的样子：http://jsfiddle.net/zessx/r6eaw/12/

【问题讨论】：

感谢您的 html 的 jsFiddle！

@urbz 我试过制作一个，但我似乎无法复制我的情况，因为我使用 bootstrap 并且 chevron 手风琴不想工作

@urbz 我稍微定制了这段代码，但这很好地代表了我的手风琴jsfiddle.net/zessx/r6eaw/12

【参考方案1】：

您可以将现有的左下角旋转到底部，而不是添加新的字形。

像这样：

.glyphicon-triangle-left
    transition: transform .3s ease-in;

.glyphicon-triangle-left.rotate-90
    transform:rotate(90deg);

然后在点击时切换rotate-90 类。

更新了 OP Fiddle

【讨论】：

正要发布相同的内容。这是一个演示：plnkr.co/edit/guNcg9PY5SS4J8Bw1QrN?p=preview

由于某种原因我的图标消失了：o

【参考方案2】：

请参阅上述信息的混搭。如果您正在处理引导手风琴，我认为这就是您正在寻找的东西。

Working Accordion JSFiddle

更新js为

function toggleChevron(e) 
    $(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('rotate-180');

$('#accordion').on('hide.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', toggleChevron);

和css到

.glyphicon-chevron-down
  transition:transform 180ms ease-in;

.glyphicon-chevron-down.rotate-180
  transform: rotate(180deg);
  transition:transform 180ms ease-in;

.glyphicon-chevron-up
  transition:transform 180ms ease-in;

.glyphicon-chevron-up.rotate-180
  transform: rotate(180deg);