Come nascondere gli elementi animati sul carico?

Question

Sto usando animate.css con waypoints.js nella mia pagina di destinazione. Voglio animare gli elementi quando l'utente scorre la pagina. Ma il problema è che ho bisogno di nascondere gli elementi prima che inizi l'animazione (se non lo nascondo, animate.css nasconde prima l'elemento e poi si anima, sembra abbastanza brutto).

Tuttavia, ho risolto il problema aggiungendo due classi nel mio css ma crea un altro problema.

.visible{ opacity: 1; } 
.invisible {opacity: 0; } 
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp'); 

Questo funziona bene fino a quando aggiungo animation-delay ad un elementi. Ecco una spiegazione che cosa voglio raggiungere. Ho elementi come questo:

<ul> 
<li>element1</li> 
<li>element2</li> 
<li>element3</li> 
</ul> 

voglio aggiungere ritardo di animazione a ciascuno degli elementi, in modo che essi fadeInUp dopo l'altro con un determinato secondi in ciascuno degli elementi che utilizzano animation-delay proprietà. Non riesco a farlo funzionare. Ho provato a seguire il codice senza usare il ritardo di animazione ma senza successo.

$('elem').each(function() { 
    // code with delay using timeout 
    setTimeout(function(){ 
    $(this).removeClass('invisible').addClass('...'); 
    }, 100); 
}); 

Fammi sapere se il mio approccio è completamente sbagliato? Se sì, allora puoi fornire un modo migliore per realizzare.

Answer 1

È possibile farlo solo con CSS.

Diciamo che stai provando ad animare un titolo. Dare la classe di vostro elemento questo css:

.title { visibility: hidden; } 

e dare alla classe d'animazione (che proviene dal animate.css) questo css:

.animated { visibility: visible !important; } 

quando colpisce il waypoint vista si aggiungerà .animated per animare codice .css e quindi sarà visibile per l'animazione.

Answer 2

Evitare di utilizzare !important per classi di accatastamento:

.hidden-load {visibility: hidden;} 
.hidden-load.animated {visibility: visible;} 

Answer 3

si può fare questo con opacità. Aggiungi una classe vuota agli elementi div che vuoi influenzare. Una volta che la jQuery allega la classe animata con i waypoint, puoi riportarla in vita con opacità: 1.

.to-be-animated { 
    opacity: 0; 
} 

.to-be-animated.animated { 
    opacity: 1; 
}