HTML Mobile App: animazione CSS3 su pagine di una lista

In questo articolo vedremo come realizzare un'animazione css3 su pagine di una lista aiutandoci con il framework animate.css.
HTML Mobile App: animazione CSS3 su pagine di una lista

Articolo di Giacomo Freddi

Riportiamo di seguito il post “HTML Mobile App: animazione CSS3 su pagine di una lista” pubblicato sul blog UpCreative.

Animazioni CSS3 con il framework animation.css

Nell’ultimo articolo ho spiegato come gestire gli eventi di fine animazione e fine transizione CSS3 tramite Modernizr, ottima tecnica per realizzare effetti performanti nella creazione di HTML Mobile App fluide e reattive.

In questo articolo, restando sempre nel tema delle HTML Mobile Apps, vedremo come combinare quella tecnica in combinazione con il framework animate.css, per realizzare una animazione css3 su pagine di una lista.

Forse ti potrebbe interessare: Animate.css: Raccolta di stili per animazioni CSS3 cross-browser.

Se sei un web designer interessato alla creazione di mobile app in HTML, CSS e Javascript, forse ti potrebbe interessare il mio e-book: HTML Mobile Accelerato, che spiega quali tecniche utilizzare per creare delle applicazioni fluide e altamente performanti, senza conoscere il codice nativo ma sfruttando solamente le tue conoscenze in ambito web.

L’idea è quella di creare la view di un’interfaccia mobile, contenente semplicemente un header ed una lista, alla quale applicheremo una paginazione tramite il click su due pulsanti “avanti” e “indietro“.

paginazione-su-lista-con-CSS3

Il markup HTML

Come primo step impostiamo il markup HTML della pagina:

<nav>
    <button rel="prev"><i class="fa fa-chevron-left"></i> Indietro</button>
    <h1 class="title">HTML Mobile App</h1>
    <button rel="next">Avanti <i class="fa fa-chevron-right"></i></button>
</nav>
<article>	
    <ul class='page animated'>
        <li class="show-detail">
            <img src="img/1.jpg" height="80px">
	    <div>
	        <h3>Lorem ipsum</h3>
		<h4>Radioactive</h4>
	        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
	    </div>
	</li>
	<li class="show-detail">
	    <aside>
	        <img src="img/2.jpg" height="80px">
	    </aside>
	    <div>
	        <h3>Lorem ipsum</h3>
		<h4>Radioactive</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
	    </div>
	</li>
	...
        ...
        ...
    </ul>
</article>

Dal codice possiamo vedere che il documento è molto semplice: abbiamo un header contenente i pulsanti “next” e “prev” per la paginazine, ed un tag article contenente la lista.

Siccome rappresenteremo ogni pagina con un elemento ul avente la classe ‘page‘, puoi ben notare che inizialmente sarà presente nel documento solo una pagina.

Gli stili CSS

Vediamo quali stili applicare alla pagina, al fine di ottimizzarne il layout per i dispositivi mobili

.page {
   list-style: none;
   margin: 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   overflow-y: auto;
 
   /* stili per il posizionamento */
   position: absolute;
   top:100px;
   bottom:0;
   width: 100%;
}
 
/*
    stili per le pagine prima delle animazioni di entrata, 'nascoste' fuori dallo schermo,
    a sinistra nel caso  della classe prev, a destra nel caso della classe next
*/
 
.page.prev{
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -o-transform: translateX(-110%);
    transform: translateX(-110%);
}
.page.next{
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -o-transform: translateX(-110%);
    transform: translateX(-110%);
}

In primis abbiamo attribuito gli stili alla lista, in modo da renderla più accattivante, poi ci siamo soffermati sulla parte più importante, il posizionamento.

Usiamo poi un position:absolute per poter spostare la pagina all’interno del documento; con l’attribuito width:100% diamo alla pagina la stessa larghezza della finestra, mentre con gli attributi top e bottom dettiamo la sua altezza rispetto a quella del documento.

Il risultato è un layout fluido ed ottimizzato per ogni risoluzione (prova a ridimensionare la finestra nella demo)

Impostiamo una proprietà transform: translateX(-110%), con i vari prefissi per la compatibilità, ad ogni pagina avente classe ‘next‘ o ‘prev‘, in modo da “nascondere” fuori dallo schermo (rispettivamente a destra o a sinistra) la div creata al click dei pulsanti avanti e indietro, ma non ancora animata.

schema-paginazione-css3

La libreria animate.css

Come già accennato, per animare le pagine ci serviamo delle due animazioni ‘slideInLeft’ e ‘slideInRight’ del framework CSS3 animate.css, per cui includiamo la libreria all’interno del tag head del documento (è possibile scaricare uno stilesheet custom dalla sezione custom build del sito):

<link href="css/animate-custom.css" rel="stylesheet">

Il codice Javascript

Includiamo come al solito jQuery nel documento. Visto che questo è soltanto un tutorial, per il rendering di ogni pagina successiva o precedente, ci limiteremo a clonare la pagina già esistente per poi inserire il nuovo elemento nel documento.

Ovviamente in un contesto reale (che presenti dati reali), l’operazione dovrebbe essere sostituita dalla generazione del markup tramite un sistema di javascript templating o altre logiche di codifica javascript in combinazione con dati (in formato json, xml ecc.) già precariati nella pagina, o magari caricati al click dei pulsanti “next” e “prev” tramite una chiamata Ajax.

Per prima cosa “ricaviamo” il nome dell’evento di fine animazione tramite Modernizr:

var endAnimationName = {
    'WebkitAnimation' : 'webkitAnimationEnd',
    'OAnimation' : 'oAnimationEnd',
    'msAnimation' : 'MSAnimationEnd',
    'animation' : 'animationend'
};
var animationName = endAnimationName[ Modernizr.prefixed( 'animation' ) ];

Poi passiamo alla gestione dell’evento c’lick’ su entrambi i pulsanti di ‘next‘ e ‘previ‘:

   //variabile globale per controllare se un'animazione è in corso o meno
   var animating = false;

   //bind dell'evento click sui pulsanti di paginazione 
   $("nav button").on("click", function(){

   	   /* 
   	   	siccome non vogliamo che più animazioni vengano eseguite contemporanemante,
   	   	annulliamo l'animazione se un 'altra è in corso. Con questa tecnica 
   	   	evitiamo per esempio l'avvio di due animazioni se l'utente effettua un 
   	   	doppio click sul pulsante
   	    */
   	   if(animating)
   	   		return false;

   	   /*
   	   riprendiamo come prima cosa il tipo di 
   	   button (next o prev) attraverso l'attributo 'rel'
   	   */
	   var mode = $(this).attr("rel");

	   /*
	   cloniamo l'elemnto della lista; questa azione, in un contesto reale,
	   andrebbe sostituita con la generazione di una lista a dopo 
	   un'eventuale chiamata ajax per reperire i dati o qualunque altro
	   sistema per ottenere idati della pagina successiva o precedente 
	   */			   
	   var newPage = $("ul.page").clone();

	   /*
	   	una volta generato l'elemento della lista, aggiungiamo la classe next o prev, 
	   	a seconda button premuto; questa classe determinerà la posizione della pagina 
	   	prima dell'animazione (fuori dello schermo, a sinistra o a destra).
	   */
	   newPage.addClass(mode)

	   //aggiungiamo l'elemento DOM al documento, all'interno del tag article
	   $("article").append(newPage);

	   /*
	   a seconda del tipo di button premuto aggiungiamo la classe 
	   di entrata da destra o sinista, che avvia l'animazione
	   */
	   animating = true; //l'animazione ha inizio
	   newPage.addClass(mode=="next"?"slideInRight":"slideInLeft");
	   /*
	   	   gestiamo l'evento di fine animazione in modo da resettare la variabile 'animating'
	   	   e rimuovere l'elemento precedente dal documento, per alleggerire il markup 
	   	   (utile nei dispositivi mobile)
	   	   rimuoviamo inoltre le classi 'next' o 'prev' e 'slideInRight' o 'slideInLeft' dall'elemento
	   */			

	   newPage.one(animationName, function(){
		   animating = false;
		   $("ul.page").not(newPage).remove();
		   newPage.removeClass("next prev slideInRight slideInLeft");
	   });

   });

Dal codice puoi vedere che ho utilizzato lo stesso selettore per selezionare i pulsanti su cui gestire l’evento di click, in quanto le azioni da svolgere per entrambi sono le stesse, a parte la differenza della classe CSS che detta il tipo di animazione di entrata nello schermo (slideInLeft o slideInRight).

Un aspetto da sottolineare è il fatto che la pagina precedentemente visualizzata viene rimossa dal documento alla fine dell’animazione di quella appena creata: ciò è pensato per alleggerire il markup su cui un eventuale dispositivo mobile dovrebbe eseguire il rendering.

Nel possibile scenario di un’app il cui compito è quello di mostrare un elevato numero di record all’interno di una lista paginata, dopo aver scorso qualche decina di pagine, l’utente potrebbe assistere infatti ad un improvviso arresto (o crash), dovuto all’elevato numero di elementi DOM su cui il browser sarebbe costretto ad eseguire il rendering.

Il risultato finale

Il gioco è fatto! Dalla demo si può notare come applicando poche righe di codice Javascript e facendo svolgere quasi tutto il lavoro ai CSS3 tramite delle animazioni performanti, è possibile realizzare interfacce che non hanno nulla da invidiare a quelle di applicazioni native (hai notato l’ottima fluidità dell’animazione di entrata di ogni pagina?).

Provalo subito

Prova la demo Consulta il codice

Crea la tua mobile app in HTML, CSS3 e Javascript

Crea la tua mobile app in HTML, CSS3 e JavascriptHey! 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 oltre 10 applicazioni mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?. Se anche tu sei un web designer e vuoi realizzare la tua applicazione da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato. Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua applicazione mobile fluida e reattiva come quelle native.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github