fontawesome圖標不旋轉時jquery

不希望隱藏希望是一個容易..我已經搜索周圍，但沒有找到任何解決這個問題。fontawesome圖標不旋轉時jquery

我正在使用隱藏在文檔加載中的簡單fontawesome圖標。微調工作正常，如果我不隱藏它，但是，如果我應用隱藏的類，然後我使用jquery來顯示它的圖標顯示，但不再動畫，只是顯示爲靜態圖標。

有沒有更好的方法，我應該隱藏這個元素，使動畫工作？

這裏是動畫圖標

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

這裏的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>

這裏是jQuery來秀的HTML基於類別的圖標

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

來源

2016-02-28 user3436467

你是如何隱藏文件加載的元素？這可能會或可能不會有助於回答您的問題，但如果明確隱瞞導致問題的原因，那麼看起來似乎至少是相關的。 –

只需用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>

希望幫助！

來源

2016-02-28 12:18:13

謝謝Saeed！添加span標籤使所有的區別。 – user3436467

我注意到，雖然它在鉻不工作Firefox ..任何想法？ – user3436467

您需要添加「-moz-animation」才能在Firefox中工作。更多關於此 - https://css-tricks.com/almanac/properties/a/animation/（滾動到底部**前綴**區域。） –

不喜歡this.your字體真棒不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>

來源

2016-02-28 12:11:58

fontawesome圖標不旋轉時jquery

回答

相關問題