fontawesomeアイコンがjqueryでunhiddenされていないときに回転しない

Question

うまくいけば簡単です..私は検索しましたが、これを解決するための何かを見つけることができませんでした。

私はドキュメントの読み込み時に隠されている単純なフォントワームアイコンを使用しています。私はそれを隠しているクラスを適用する場合、私はjQueryを使用してアイコンが表示されますが、もはやアニメーションは、静的なアイコンとして表示されません。

私はこの要素を非表示にしてアニメーションを動作させるべきですか？ HERE

はICON HERE

.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はICON INSIDE AブートストラップBUTTON

<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> 

のHTMLがここにjQueryを表示することですISクラスに基づくアイコン

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

Answer 1

のようなプロジェクトにthis.yourフォント素晴らしいcase.addには、次のされていないworking.thatオンラインスクリプト（JS）とCSS好きですスパンでアイコンをラップし、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> 

希望！

Answer 2

この

$('.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>