Glyphicons di bootstrap animati

Question

Sto usando il bootstrap glyphicon-triangle-left e glyphicon-triangle-bottom glyphicons in una fisarmonica bootstrap. Quando apri un div, mostra lo bottom e quando lo chiudi, mostra lo left.

Quando le icone cambiano classe, sembra un po 'stupido, quindi voglio creare una transizione per far ruotare o sfumare l'icona. Ma io non sono sicuro di come posso fare questo da quando ho commutare tra le classi tramite jQuery in questo modo:

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

io non sono sicuro di come posso fare questo perché utilizza le classi dal bootstrap fisarmonica ecc

ho provato a fare qualcosa di simile nel mio file css, ma non è davvero fare quello che voglio fare: p

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

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

qualcuno avesse qualche idea di come posso fare la transizione icone? Molte grazie in anticipo !!

EDIT: ho personalizzato il codice un po ', ma questo una buona rappresentazione di ciò che la mia fisarmonica appare come: http://jsfiddle.net/zessx/r6eaw/12/

Answer 1

Invece di aggiungere un nuovo glyphicon è possibile ruotare l'esistente a sinistra uno a fondo.

Ti piace questa:

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

quindi alterna la classe rotate-90 al clic.

Aggiornato il PO Fiddle

Answer 2

Vedere questo mashup di informazioni di cui sopra. Penso che sia quello che stai cercando se hai a che fare con un fisarmonicista di bootstrap.

Working Accordion JSFiddle

js aggiornati a

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

e CSS per

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