当用jquery取消隐藏时,fontawesome图标不会旋转

Question

希望是一个简单的...我已经四处搜索,但无法找到任何解决这个问题.

我正在使用一个隐藏在文档加载上的简单fontawesome图标.如果我没有隐藏它,微调器工作正常,但是,如果我将隐藏的类应用于它然后我使用jquery显示图标显示但不再动画,只显示为静态图标.

有没有更好的方法,我应该取消隐藏这个元素,使动画工作？

这里是动画图标的CSS

.icon-spinner {
    display: none;
}
.load-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

这里是BOOTSTRAP按钮内的图标的HTML

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-spinner load-animate icon-spinner"></i>
Action</button>

这里是基于课堂的图标

$('.icon-spinner').show();

Answer 1

只需用span填充图标,然后将icon-spinner类添加到其中.

演示小提琴 - https://jsfiddle.net/ub4xk013/1/

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon-spinner"><i class="fa fa-spinner load-animate"></i></span>
Action</button>

希望有所帮助!