Frank Lucas Frank Lucas - 2 months ago 12
CSS Question

Animating Bootstrap glyphicons

I am using the bootstrap

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

When the icons switch classes it looks a little stupid so I want to create a transition maybe make the icon rotate or fade out/in.
But I am not sure how I can do this since I toggle between classes via jQuery like so:

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


I am not sure how I can do this because it uses the classes from the bootstrap accordion etc.

I've tried doing something like this in my css file but it's not really doing what I want it to do :p

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

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


Anyone had any idea how I can make the icons transition?
Many thanks in advance!!

EDIT: I customized this code a bit but this a good representation of what my accordion looks like: http://jsfiddle.net/zessx/r6eaw/12/

Roy Roy
Answer

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

Like this:

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

Then toggle the rotate-90 class on click.

Updated the OP Fiddle