Fai aspettare quelle animazioni!

Non c’è niente di peggio che atterrare su un sito web ben progettato e sviluppato con alcune animazioni belle e sottili (SEMPRE sottili!), Solo che le animazioni inizino non appena la pagina tenta di caricarsi. Che cosa ottieni? Animazioni stravaganti, sbalorditive e sicuramente NON sottili.

Mi sono imbattuto in questo pratico suggerimento per assicurarmi che le animazioni inizino a essere riprodotte solo una volta caricata la pagina, utilizzando la proprietà animazione-riproduzione-stato ora ben supportata.

Suppongo che non stai permettendo a un sito di essere pubblicato che impiega più di un secondo o due a caricarsi completamente in primo luogo, ma se sei (cattivo!), Per favore, facci un favore e considera un’icona di caricamento per evitare una pagina vuota.

Quindi, per il nostro primo passo, dobbiamo usare alcuni javascript per rilevare l’evento load sulla finestra. Assicurati che questo sia uno dei primi pezzi di codice da eseguire sul tuo sito:

  window.addEventListener("load", loadPage, false); 
function loadPage() {
... some fun stuff will go here
}
window.addEventListener("load", loadPage, false);
function loadPage() {
... some fun stuff will go here
}

Ora che sapremo quando la pagina è pronta, possiamo aggiungere una classe al tag che rimuoveremo una volta caricata la pagina, questo dirà a quelle animazioni (che attendono pazientemente) di iniziare a “sorprenderci e deliziarci”.

  
document.body.classList.add('js-still-loading');
window.addEventListener("load", loadPage, false);
function loadPage() {
document.body.classList.remove('js-still-loading');
}

Quindi puoi vedere qui nella prima riga che stiamo aggiungendo la classe ‘js-still-loading’ alla prima cosa e quindi una volta che la pagina è completamente caricata la rimuoviamo.

Ora tutto ciò che dobbiamo fare è aggiungere al nostro stile quella proprietà CSS davvero utile animazione-gioco-stato. Questa proprietà è ben supportata in tutti i principali browser moderni, incluso IE10. Non solo puoi interrogare questa proprietà con javascript per determinare se un’animazione è attualmente in esecuzione, ma può anche essere utilizzata per eseguire o mettere in pausa tutte le animazioni su una pagina.

Se lo aggiungiamo al nostro CSS:

 .js-still-loading *, 
.js-still-loading *:before,
.js-still-loading *:after {
animation-play-state: paused !important;
}

Tutte le nostre animazioni rimarranno in pausa fino a quando la classe “js-still-loading” è presente. Questo è tutto. Non c’è bisogno di aggiungerlo a ogni singola animazione nel tuo CSS, non è necessario alcun javascript di fantasia … e i vantaggi non sono più animazioni stravaganti e stuttery mentre la pagina sta provando a caricare.