Animating Bootstrap glyphicons

Question

我在自举手风琴中使用引导程序glyphicon-triangle-left和glyphicon-triangle-bottom glyphicons。当你打开一个div时，它显示bottom一个，当你关闭它时，它显示left之一。

当图标切换类时，它看起来有点愚蠢，所以我想创建一个转换可能会使图标旋转或淡出/在。 但我不知道我怎么能做到这一点，因为我通过jQuery类之间切换，就像这样：

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

我不知道我怎么能做到这一点，因为它使用从引导手风琴等

类

我试着做这样的事情在我的CSS文件，但它不是真正的做我想做的事情：对

.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 Fiddle

Answer 2

参见上面的信息的这种混搭。我认为这是你正在寻找如果你正在处理一个引导手风琴。

Working Accordion JSFiddle

更新，JS来

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

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