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

【问题标题】：fontawesome icon not spinning when unhidden with jquery使用 jquery 取消隐藏时，fontawesome 图标不旋转
【发布时间】：2016-02-28 20:18:13
【问题描述】：

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

我正在使用一个简单的 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);}
}

这是引导按钮内图标的 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

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

【问题讨论】：

如何在文档加载时隐藏元素？这可能对回答您的问题有帮助，也可能没有帮助，但如果明确表明它最初是隐藏的导致问题，那么它似乎至少是相关的。

标签： jquery css twitter-bootstrap font-awesome

【解决方案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>

希望有帮助！

【讨论】：

感谢赛义德！添加跨度标签让一切变得不同。
我注意到虽然它可以在 chrome 中运行而不是 firefox .. 有什么想法吗？
您需要添加“-moz-animation”才能在 Firefox 中工作。更多关于这个 - css-tricks.com/almanac/properties/a/animation（滚动到底部前缀区域。）

【解决方案2】：

这样做。你的字体真棒不工作。就是这样。像这样将以下在线脚本（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>

【讨论】：