L'icona fontawesome non gira quando non è visibile con jquery

speriamo che sia facile .. ho cercato in giro ma non ho trovato nulla per risolvere questo problema.L'icona fontawesome non gira quando non è visibile con jquery

Sto usando una semplice icona fontawesome che è nascosta sul carico del documento. Lo spinner funziona bene se non lo sto nascondendo, tuttavia, se applico la classe nascosta ad esso, allora uso jquery per mostrare che l'icona è visualizzata ma non è più animata, si mostra semplicemente come icona statica.

C'è un modo migliore in cui dovrei nascondere questo elemento per far funzionare l'animazione?

Ecco il CSS per animare l'ICONA

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

Ecco l'HTML dell'icona ALL'INTERNO DI UN BOOTSTRAP PULSANTE

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

Ecco l'jQuery per SPETTACOLO L'ICONA BASATA SULLA CLASSE

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

fonte

2016-02-28 user3436467

Come si nasconde l'elemento sul carico del documento? Questo può o non può essere d'aiuto nel rispondere alla tua domanda, ma se è esplicitamente che inizialmente è nascosto causando il problema, allora sembra almeno pertinente. –

basta avvolgere l'icona con uno span e aggiungere la classe icon-spinner ad esso.

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

speranza che aiuta!

fonte

2016-02-28 12:18:13

grazie Saeed! aggiungere le tag span ha fatto la differenza. – user3436467

ho notato anche se funziona in chrome non firefox .. qualche idea? – user3436467

sarà necessario aggiungere "-moz-animation" per funzionare in Firefox. più su questo - https://css-tricks.com/almanac/properties/a/animation/ (scorri verso il basso ** Area prefissi **). –

fare come this.your font-impressionante non è working.that è il case.add seguenti script on-line (JS) e CSS per il vostro progetto come questo

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

fonte

2016-02-28 12:11:58

L'icona fontawesome non gira quando non è visibile con jquery

risposta

Problemi correlati