fontawesome simgesi jquery ile temasa geçtiğinde dönme değil

Question

umarım kolay bir tane .. aradım ama bunu çözmek için hiçbir şey bulamadım.

Belge yükünde gizlenen basit bir fontawesome simgesi kullanıyorum. Eğer saklamıyorsam spinner iyi çalışıyor, ancak eğer gizli sınıfı ona uygularsam, ikonun görüntülendiğini göstermek için jquery kullanıyorum ama artık animasyonlu değil, sadece statik simge olarak gösteriliyor.

Animasyon yapmak için bu öğeyi gizlememenin daha iyi bir yolu var mı? BURADA

ICON İÇİ A BOOTSTRAP DÜĞME BURADA

<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 göstermektir OF HTML ICON

BURAYA

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

ANIMATE İÇİN CSS IS SINIF

ÜZERİNDEN DÜZENLENMİŞTİR

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

Answer 1

gibi projenize this.your yazı-müthiş case.add takip ediyor değil working.that çevrimiçi komut (js) ve css gibi yap Simgeyi bir span ile sarın ve buna icon-spinner sınıfını ekleyin.

demo keman - yardımcı 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> 

umut!

Answer 2

bu

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