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