Bootstrap glyph animation

Question

I use the glyphicon-triangle-left and glyphicon-triangle-bottom bootstrap glyphicons in the soundtrack. When you open a div, it shows bottom one, and when you close it, it shows left one.

When the icon switcher classes look a little silly, so I want to create a transition, it is possible for the icon to rotate or disappear. But I'm not sure how to do this, as I switch between classes via jQuery as follows:

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

I am not sure how to do this because it uses classes from the soundtrack, etc.

I tried doing something like this in my css file, but that does not do what I want: p

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

Did anyone know how I can make icon transitions? Thank you very much in advance!

EDIT: I tweaked this code a bit, but this is a good idea of ​​what my accordion looks like: http://jsfiddle.net/zessx/r6eaw/12/

Answer 1

Instead of adding a new glyphicon, you can rotate the existing one from the bottom left.

Like this:

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

Then switch the rotate-90 class to click.

Updated OP Fiddle

Answer 2

See this mashup information above. I think this is what you are looking for if you are dealing with a bootstrap soundtrack.

JSFiddle Work Accordion

updated js to

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

and css for

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