Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

dicembre 03, 2013
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+0

Usare animazioni e transizioni CSS3 in siti e applicazioni web è ormai diventata (fortunatamente) pratica sempre più comune ed i vari web designer si sbizzarriscono con il loro utilizzo per cercare di distinguersi in creatività e design rispetto agli altri.

Molte volte navigando in rete ci imbattiamo in portfolio o showcase che usano una combinazione di effetti CSS3 ben organizzati e disposti secondo un determinato ordine, al fine di raggiungere un certo tipo di risultato.

Anche a me capita molto spesso di dover far partire un’animazione o transizione nel momento in cui l’altra è appena terminata. In questo articolo che ti voglio parlare di una risorsa secondo me molto utile: come gestire gli eventi di callback di fine animazione e transizione nei CSS3.

Modernizr-e-CSS3-eventi-fine-animazione

 

Modernizr e CSS3

Un tool che non deve mai mancare nelle mie applicazioni, siano esse mobile o web, è sicuramente Modernizr. Grazie ad esso possiamo tranquillamente inserire nei nostri progetti tutte le nuove tecnologie e funzionalità che il web ci mette a disposizione, in modo da gestire i browser che non le supportano e applicando la tecnica del miglioramento progressivo molto facilmente.

Mi ero servito di Modernizr per applicare la tecnica del progressive enhancement in questo articolo su come realizzare un menù stile mobile con i CSS3.

Vediamo un esempio di come usare il framework per richiamare tramite javascript una funzione all’evento di fine animazione o transizione CSS3 di un elemento DOM.

Supponiamo di avere due animazioni e di voler far partire la seconda solo al termine della prima:

Animazione 1: Rotazione in Entrata

Animazione 2: Effetto fade in uscita

 

Credits: le animazioni sono state prelevate dal codice sorgente del framework animate.css (ne avevo parlato in questo articolo)

Per prima cosa includiamo Modernizr nel documento, all’interno del tag <head>, come dice la documentazione:

Per spiegare il concetto nel modo più semplice applicheremo il primo effetto ad una div, e dopo l’evento di fine animazione aspetteremo 5 secondi per poi passare alla seconda animazione. Utilizziamo jQuery per realizzare tutto ciò:

OK, ma come fa la funzione “getEndAnimationName” a riprendere il nome dell’animazione?

E’ proprio qui che entra in gioco Modernizr: ci serviamo della funzione “prefix” per conoscere il prefisso del browser dell’utente associato alla proprietà passata come input.

Nella funzione  abbiamo preparato un oggetto con i prefissi di tutti i browser come chiavi e i nomi degli eventi di fine animazione come valori; quindi impostiamo come parametro di ritorno il valore corrispondente alla chiave restituita da Modernizr.

Ovviamente, se abbaiamo bisogno del nome dell’evento di inizio animazione, la procedura sarà la stessa, modificando i nomi degli eventi con “webkitAnimationStart“, “oAnimationStart“, “MSAnimationStart“, e “animationStart“.

Per impostare l’evento di fine transizione, il procedimento sarà analogo:

 

Modernizr-e-CSS3-eventi-fine-animazione

Conculsioni

Grazie a questa tecnica sono riuscito ad organizzare e coordinare la sinergia tra le view delle applicazioni mobile HTML5 che ho distribuito su App Store. Mi è tornata particolarmente utile per esempio al fine di nascondere o eliminare la div di una view al termine di una animazione di uscita per alleggerire il markup (migliorando quindi le prestazioni).

E tu? Quale tecniche utilizzi per gestire le animazioni e le transizioni nei tuoi progetti?

Hey! Sto scrivendo un e-book su come aumentare le performance e la fluidità per le tue HTML mobile app! Segui i consigli e le tecniche di cui mi sono servito per creare le mie applicazioni (come Tint, Dieta SI o NO?).
Iscriviti alla newsletter per sapere quando sarà pronto!
HTML-mobile-accelerato-ebook-cover

HTML Mobile Accelerato (E-book)

Lascia la tua email per ricevere aggiornamenti e sapere quando sarà disponibile

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.