Question

我使用Bootstraps手风琴元素，当它打开时，我想旋转图标。我使用jQuery检查它是否已折叠（因此其他元素将关闭）然后我想要旋转图标。我使用jQuery添加一个类来旋转图标（可以工作），但它会跳回到之前的状态：

.cross_up{
        background:url(../img/cross.png) center center;
        transition: all 0.20s ease;
    }

    .cross_down{
        transition: all 0.20s ease;
        transform:rotate(45deg);
        animation-fill-mode:forwards;
    }

HTML

<span class="cross_up"> </span>Verzekeringen

的jQuery

$('.collapse').on('shown.bs.collapse', function(){
    $(this).parent().find(".cross_up").addClass("cross_down");
}).on('hidden.bs.collapse', function(){
    $(this).parent().find(".cross_down").removeClass("cross_down");
});

工作链接here

Answer 1

我认为这是因为您正在尝试旋转背景。你应该尝试旋转整个范围。

<span class= "cross_down">
<span class="cross_up"> </span> 
</span>
Verzekeringen

如果要在背景图像上应用css变换，请参阅链接。

http://www.sitepoint.com/css3-transform-background-image/

图标旋转但返回上一个位置

1 个答案: