动画引导字形图标

Question

我在 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/

Answer 1

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

像这样：

.glyphicon-triangle-left{
    transition: transform .3s ease-in;
}
.glyphicon-triangle-left.rotate-90{
    transform:rotate(90deg);
}

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

更新了 OP Fiddle

Answer 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);