动画Bootstrap glyphicons

Question

我正在使用bootstrap手风琴中的bootstrap glyphicon-triangle-left和glyphicon-triangle-bottomglyphicons.当你打开一个div时它显示一个div bottom,当你关闭它时,它会显示left一个.

当图标切换类时,它看起来有点愚蠢,所以我想创建一个过渡可能使图标旋转或淡出/进入.但我不知道我怎么能这样做,因为我通过jQuery在类之间切换如下:

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

我不知道如何做到这一点,因为它使用了自举手风琴等的类.

我已经尝试在我的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.

像这样:

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

然后rotate-90在点击时切换班级.

更新了OP 小提琴