Bootstrap Glyphicons animieren

Question

Ich benutze die Bootstrap glyphicon-triangle-left und glyphicon-triangle-bottom Glyphicons in einem Bootstrap Akkordeon. Wenn Sie ein div öffnen, zeigt es das bottom eins und wenn Sie es schließen, zeigt es das left eins.

Wenn die Symbole die Klassen wechseln, sieht es ein bisschen dumm aus, also möchte ich einen Übergang erstellen, um das Symbol zu drehen oder auszublenden. Aber ich bin nicht sicher, wie kann ich dies tun, da ich zwischen den Klassen über jQuery wechseln wie folgt:

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

Ich bin nicht sicher, wie ich kann dies tun, weil sie die Klassen aus dem Bootstrap-Akkordeon usw. verwendet

ich habe so etwas in meiner CSS-Datei versucht zu tun, aber es ist nicht wirklich tut, was ich will es tun: p

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

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

Wer noch keine Ahnung hat, wie ich die Symbole Übergang zu machen? Vielen Dank im Voraus!

EDIT: Ich angepasst diesen Code ein wenig, aber dies eine gute Darstellung von dem, was mein Akkordeon wie folgt aussieht: http://jsfiddle.net/zessx/r6eaw/12/

Answer 1

Anstatt eine neue glyphicon hinzuzufügen Sie drehen können die eine nach unten links vorhanden.

So:

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

Dann schalten Sie die rotate-90 Klasse auf Mausklick.

die OP Fiddle

Aktualisiert oben

Answer 2

Sehen Sie dieses Mashup der Info. Ich denke, es ist das, wonach Sie suchen, wenn Sie mit einem Bootstrap-Akkordeon arbeiten.

Working Accordion JSFiddle

aktualisiert js zu

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

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