使用 jquery 取消隐藏时，fontawesome 图标不旋转

Question

希望是一个简单的方法..我已经四处搜索但找不到解决这个问题的方法。

我正在使用一个简单的 fontawesome 图标，它在文档加载时隐藏。如果我没有隐藏它，微调器工作正常，但是，如果我将隐藏的 class 应用到它然后我使用 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>

这里是 JQUERY 显示基于 CLASS

的图标

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

Answer 1

喜欢this.your font-awesome 不是working.that 是case.add 跟随在线脚本(js) 和css 像这样

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<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>

Answer 2

只需用 span 包裹图标，然后添加 icon-spinner class。

演示 fiddle - 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>

希望对您有所帮助！

使用 jquery 取消隐藏时，fontawesome 图标不旋转

fontawesome icon not spinning when unhidden with jquery

jquery

css

twitter-bootstrap

font-awesome