Twitter Bootstrap rappresenta un’ottima risorsa per tutti coloro che operano nell’ambito del web design, ed in rete si possono trovare migliaia di siti web e applicazioni realizzate con questo utilissimo framework. Se però da una parte fa senz’altro comodo potersi appoggiare ad un sistema solido ed aggiornato, crossbrowser e responsive, dall’altra è altrettanto vero che, in un mare di progetti “Bootstrap-based“, diventa  necessario distinguersi dagli altri.

Uno dei modi più utili per farlo è quello di implementare delle funzionalità originali sui componenti dell’interfaccia. In un precedente articolo ti ho mostrato come realizzare uno slide menu originale con animazioni CSS3, con tanto di progressive enhancement, ovvero quella tecnica che permette di applicare alle funzionalità dei componenti un miglioramento progressivo a seconda del browser, tramite CSS3:

• CSS3 slide panel: tutorial su come realizzare un menu stile mobile

Twitter Bootstrap Search Box

In questo articolo ti voglio mostrare come rendere originale ed accattivante l’esperienza di ricerca all’interno di un sito web o applicazione, sia essa desktop o mobile. Ciò che infatti realizzeremo è un search box con effetto slide-down, la cui caratteristica principale è quella di essere totalmente responsive, in quanto ci serviremo di Twitter Bootstrap.

Il risultato dell’esperimento potrà essere pertanto implementato anche su applicazioni Mobile, anche per il fatto che utilizzeremo delle animazioni CSS3 altamente performanti per i dispositivi che le supportano, mentre ricorreremo a quelle meno performanti nel caso di browser più datati.

---

Realizzare un search box #crossbrowser e #responsive con #TwitterBootstrap #webdesign
Click To Tweet

---

L’obiettivo è quello di far comparire dall’alto il campo di ricerca nel momento in cui viene cliccata l’apposita icona, in modo da coprire completamente la barra di navigazione. Quando si verifica l’evento “blur” del campo richiameremo invece l’effetto contrario, quello per nascondere il form.

A questo proposito ti consiglio di leggere:

• Performance CSS3: consigli per ottimizzare le prestazioni
• Web e mobile app fluide con Hardware Acceleration

Il markup HTML

Il codice HTML utilizzato per i vari elementi DOM è relativamente semplice; in particolare non facciamo altro che prelevarlo dalla documentazione del sito ufficiale di Twitter Bootstrap in modo da ricreare la navbar, applicando qualche piccola modifica:

<!-- menu di navigazione -->

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">	

  <div class="container-fluid">
    <div class="navbar-header">        

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="http://www.upcreative.net">upCreative.net</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li>
        	<a href="#" id="search-button">
            	<i class="fa fa-search fa-lg"></i> 
	        <span>Cerca</span>
        	</a>
        </li>
      </ul>          
    </div>
  </div>

  <!-- il form di ricerca, inizialmente nascosto -->

  <form class="navbar-form" action="#">
    <input type="search" placeholder="Cerca...">
    <a href="#" id="close-button"><i class="fa fa-times fa-lg"></i></a>
  </form>
</nav>

Ci serviamo quindi del tag <article> per rappresentare il contenuto della pagina (o applicazione):

<!-- Contenuto pagina web --> 

<article class="text-center">

	<h1>Twitter Bootstrap search box con animazioni CSS3</h1>	

	<a href="http://www.upcreative.net/" class="btn btn-primary btn-lg">Vai all'articolo del tutorial <i class="fa fa-chevron-right"></i></a>

	<p>
		Guarda la demo in un dispositivo mobile per poter poter visualizzare al meglio le 
		performance raggiungibili con la tecnica dell'<strong>accelerazione hardware</strong>.
	</p>

	<p style="margin-top:30px;">
		oppure consulta altri tutorial su upCreative.net:
	</p>

	<a href="http://www.upcreative.net/tutorial-css3-e-javascript-per-web-designers/" class="btn btn-primary"><i class="fa fa-globe"></i> upCreative.net</a>

</article>

Per quanto riguarda le icone di ricerca e di chiusura abbiamo usato quelle del framework Fontawesome, icon-font appositamente creato per Twitter Bootstrap.

Il codice CSS3

Vediamo ora il codice per il foglio di stile:

/* stili del form della navbar */
.navbar-form{

	/*
		posizioniamo il form di ricerca in modo assoluto ed impostiamo
		larghezza ed altezza al 100% in modo da coprire completamente la 
		navbar che lo contiente		
	*/
	position: absolute;
	padding:0;
	left:0;
	top:0;
	width:100%;
	height:70px;
	margin: 0;
}

Abbiamo impostato la grandezza del form che contiene il campo di ricerca (classe .navbar-form) in modo che avesse le stesse dimensioni della navbar, per far sì che quest’ultima venga interamente coperta al momento dell’azione di ricerca.

Aggiungiamo ora la definizione delle modalità di animazione:

.navbar-form{	
	/* 
		impostiamo ad all l"attributo scantenante" per l'effetto 
		di transizione, in modo da scatenarlo sia se viene modificato il 
		valore della proprietà 'top', che quello della proprietà 'transorm'.
		Grazie alla proprietà 'transform sarà' possibile rendere l'effetto 
		fluido e performante anche per i dispositivi mobile, 
		forzando la creazione dei layers grafici.
	*/
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	   	-ms-transition: all .3s;
		 -o-transition: all .3s;
		 	transition: all .3s;

	/*
		inizialmente nascondiamo fuori dallo schermo il form di ricerca, 
		in modo che sia traslato negativamente in verticale dello stesso
		numero di pixek che compone l'altezza della navbar 
	*/
	-webkit-transform: translate3d(0,-70px,0);
	   -moz-transform: translate3d(0,-70px,0);
	    -ms-transform: translate3d(0,-70px,0);
	     -o-transform: translate3d(0,-70px,0);
	        transform: translate3d(0,-70px,0);
}

Aggiungiamo una piccola porzione di codice per “ripiegare” sull’utilizzo della proprietà “top“, al fine di scatenare l’effetto di entrata nel caso in cui il browser del visitatore non supporti la proprietà “translate” (poco performante perché implica la ripetizione di gran parte del processo di rendering):

/*
se il browser non supporta la proprietà translate, allora impostiamo il
valore top negativo, dello stesso numero di pixel dell'altezza della navbar
*/
body.without-translate .navbar-form{
    top: -70px;
}

La classe .with-translate verrà aggiunta al body della pagina utilizzando Modernizr; lo vedremo analizzando il codice Javascript.

Passiamo quindi a definire gli stili per le proprietà grafiche dell’input di ricerca e quelle per il posizionamento dell’icona di chiusura:

/*
	impostaiamo gli stili per l'elemento input. In particolare facciamo in modo 
	che il campo di testo abbia le stesse dimensioni dell'elemento form che lo contiene
*/
.navbar-form input[type='search']{
	outline: 0;	
	width: 100%;
	height:100%;
	font-size: 24px;
	color:#F4F4F4;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	padding:11px 15px;
	padding-right: 35px; /*aumentiamo il padding per "fare spazio" al pulsante di chiusura del form	*/
	background: #000;
	border:0;	
}

/*
	impostiamo in modo assoluto il pulsante di chiusura del 
	form di ricerca in modo che sia posizionato in fondo a destra rispetto 
	al conteitore e che stia sopra il campo di ricerca
*/

#close-button{
	position: absolute;
	right:18px;
	top:24px;
	color: #FFF;
}

Infine facciamo in modo che, nel momento in cui viene aggiunta la classe .open al form di ricerca, siano modificate le “proprietà scatenanti” che avviano l’effetto, secondo quanto definito precedentemente:

/*
definiamo la classe per la visualizzazione del form di ricerca	
*/
.navbar-form.open{	
	/*
	nel momento in cui questa classe viene aggiunta al form,
	andiamo a modifica l'attributo scatenante definito in precedenza (transform)
	per avviare l'aniamzione
	*/	
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	    -ms-transform: translate3d(0,0,0);
	     -o-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);

}

/*
se il browser non supporta la proprietà translate, allora 
attiviamo l'effetto agendo sulla proprietà 'top'.
*/

body.without-translate .navbar-form.open {
    top: 0;
}

 

Il codice Javascript

Come al solito definiamo subito, tramite Modernizr,  il nome dell’evento di fine transition in modo da eseguire la nostra funzione javascript nel momento in cui l’animazione di apertura giunge al termine:

/* Grazie a modernizr riprendo il nome dell'evento di fine transizione, che cambia a seconda del browser */

var endTransitionName = {
	'WebkitTransition' : 'webkitTransitionEnd',
	'OTransition' : 'oTransitionEnd',
	'msTransition' : 'MSTransitionEnd',
	'transition' : 'transitionend'
};
var transitionEventName = endTransitionName[ Modernizr.prefixed( 'transition' ) ];

Per avere maggiori informazioni sulla gestione degli eventi di effetti realizzati tramite le proprietà transition e animation, ti consiglio di leggere questo articolo:

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

Aggiungendo ora la classe .without-translate al body, nel caso in cui non sia presente il supporto per la proprietà transform:

/* 
    grazie a modernizr, controllando le classi del tag HTML 
    possiamo sapere se il browser supporta determinate funzionalità        
*/
var supportCssTransforms = $("html").hasClass("csstransforms3d"),
    supportCssTransitions = $("html").hasClass("csstransitions");

/*
    se il browser non supporta la prop. 'transform' aggiungiamo la classe 'without-translate' al body, 
    in modo da poter differenziare la modalità d'effetto tramite CSS
*/
if(!supportCssTransforms){
    $("body").addClass("without-translate");
}

Infine gestiamo gli eventi di click e blur  per pulsanti e campo di ricerca:

/*
	definiamo gli elementi sui quali agiremo
*/
var navForm = $("nav .navbar-form"), 
	input = navForm.find("input[type='search']"),
	openBnt = $("#search-button"),
	closeBtn = $("#close-button");

openBnt.on("click", function(e){
	e.preventDefault();
	//alla fine dell'effetto di transizione richiamiamo il focus sul campo di testo		    	
	navForm.addClass("open").one(transitionEventName, function(){ 	   
    	   input.focus();
	});
        /* 
        se il browser non supporta le transition CSS3 allora l'evento di fine animazione non si verificherà, 
        pertanto richiameremo il focus sul campo di ricerca subito dopo aver aggiunto 
        la classe 'open' al form
        */
        if(!supportCssTransitions)
	   input.focus();

});

/*
	nel momento in cui si verifica l'evento blur, rimuoviamo la classe "open"
	dal form in modo da scatenare l'animazione con effetto contrario (quella
	che nasconde appunto il form)
*/	    	
input.on("blur", function(){ 		    	
	navForm.removeClass("open");
});

/*
	al click dell'icona di chiusura forziamo il blur del campo per scatenare il
	conseguente effetto di chiusura
*/
closeBtn.on("click", function(e){
	e.preventDefault(); 		    	
	input.trigger("blur");
});

Ed ecco finalmente il risultato finale:

Conclusioni

Con questo tutorial spero di averti dimostrato che servirsi di animazioni CSS3 performanti è un’ottimo metodo per rendere originale un sito web e distinguerlo dagli altri, oppure per implementare dei componenti fluidi nelle proprie applicazioni mobile sviluppate in HTML5, CSS3 e Javascript. Così facendo possiamo realizzare prodotti le cui prestazioni si avvicinano il più possibile a quelle di applicazioni native.

---

Realizzare un search box #crossbrowser e #responsive con #TwitterBootstrap #webdesign
Click To Tweet

---

L’impiego della tecnica del miglioramento progressivo permette inoltre di applicare il nostro effetto a tutti i tipi di browser, spaziando da quel più vecchi quelli a quelli di ultima generazione.

E tu? Utilizzerai questa tecnica nei tuoi progetti? Lascia pure un tuo commento per qualunque dubbio o perplessità, o per suggerire delle funzionalità aggiuntive.

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

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.

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?).

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica unita a molte altre ho creato per i miei clienti oltre 10 applicazioni per dispositivi 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 mobile 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.

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

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:

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:

<script src="js/modernizr.custom.js"></script>

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

$(function(){

   var endAnimationEventName = getEndAnimationName();  

   //aggiungiamo la classe per l'animazione e all'evento di dine animazione
   //eseguiamo (una volta con '.one') la funzione successiva
   $("#mydiv").addClass("rotateInDownLeft").one(endAnimationEventName, function(){
       $(this).text("Aspetto 5s poi me ne vado...");
       setTimeout(function(){
           $("#mydiv").addClass("fadeOutRight");   
       }, 5000); //aspettiamo 5 secondi
   });

});

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.

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

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:

function getEndTransitionnName(){
   var endTransitionName = {
	'WebkitTransition' : 'webkitTransitionEnd',
	'OTransition' : 'oTransitionEnd',
	'msTransition' : 'MSTransitionEnd',
	'transition' : 'transitionend'
   };
   return endTransitionName[ Modernizr.prefixed( 'transition' ) ];
}

 

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?