jquery - 动画自举字形

我正在引导式 Accordion 中使用引导式glyphicon-triangle-left和glyphicon-triangle-bottom字形。当您打开一个div时，它会显示bottom一个，当您关闭它时，它会显示left一个。

当图标切换类时，它看起来有些愚蠢，因此我想创建一个过渡，可能会使图标旋转或淡入/淡出。
但是我不确定如何做到这一点，因为我通过jQuery这样在类之间进行切换:

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

我不确定如何做到这一点，因为它使用了bootstrap Accordion 等中的类。

我已经尝试在css文件中执行类似的操作，但实际上并没有执行我想要的操作:p

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

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

有人知道我如何进行图标转换吗？
提前谢谢了!!

编辑:我对此代码进行了一些自定义，但这很好地表示了我的 Accordion 的外观:http://jsfiddle.net/zessx/r6eaw/12/

最佳答案

无需添加新的字形，您可以将现有的左字形旋转到底部。

像这样:

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

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

更新了OP Fiddle

关于jquery - 动画自举字形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36402050/