ブートストラップグリフコンのアニメーション

Question

ブートストラップアコーディオンのブートストラップglyphicon-triangle-leftとglyphicon-triangle-bottomグリフィンを使用しています。 divを開くとbottomが表示され、閉じるとleftが表示されます。

アイコンがクラスを切り替えると、ちょっと馬鹿に見えるので、トランジションを作成してアイコンを回転させるかフェードアウトすることができます。

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

私はそれがブートストラップアコーディオンなど

からのクラスを使用していますので、私はこれを行うことができますかわからない： しかし、私はそうのようにjQueryを介して、クラス間で切り替えるので、私はこれを行うことができますかわかりません

私は私のCSSファイルでこのような何かをやってみましたが、本当に私はそれが何をしたいのかやっていない：P

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

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

誰もが、私はアイコンが移行することができますどのように任意のアイデアを持っていましたか？ 事前に感謝します！

EDIT：http://jsfiddle.net/zessx/r6eaw/12/

Answer 1

の代わりにあなたが一番下に、既存の左側の1を回転させることができる新しいglyphiconを追加：私は私のアコーディオンがどのように見えるかの良い表現をこのコードを少しカスタマイズされたが、これ。

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

次にクリックでrotate-90クラスを切り替える：このように

。 OP Fiddle

Answer 2

更新

は、上記の情報のこのマッシュアップを参照してください。私はあなたがブートストラップアコーディオンを扱っているなら、それがあなたが探しているものだと思います。あなたのHTMLが高く評価されて

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