jquery - 动画 Bootstrap 字形图标

Question

我在自举 Accordion 中使用自举 glyphicon-triangle-left 和 glyphicon-triangle-bottom 字形。当您打开一个 div 时，它会显示 bottom 一个，当您关闭它时，它会显示 left 一个。

当图标切换类时它看起来有点愚蠢所以我想创建一个过渡可能使图标旋转或淡出/淡入。 但是我不确定我该怎么做，因为我像这样通过 jQuery 在类之间切换:

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

我不确定我该怎么做，因为它使用了 Bootstrap Accordion 等中的类。

我试过在我的 css 文件中做这样的事情，但它并没有真正按照我想要的方式做:p

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

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

任何人都知道我如何使图标过渡？ 非常感谢!!

编辑:我稍微定制了这段代码，但这很好地表示了我的 Accordion 的样子:http://jsfiddle.net/zessx/r6eaw/12/

Answer 1

您可以将现有的左边的字形旋转到底部，而不是添加新的字形。

像这样:

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

然后在点击时切换 rotate-90 类。

更新了 OP Fiddle