Un “problema” delle transizioni CSS3 è il fatto che sono legate ai cambiamenti di stato, e nonostante nel linguaggio CSS ne esistono vari, spesso il più utilizzato è :hover ovvero quello responsabile di gestire il passaggio del mouse su un particolare elemento (esiste un CSS Tip a riguardo)… una favolosa interazione che è completamente inutile sui dispositivi touch! 

Ma non disperate non è ancora tutto perduto perché Javascript è qui per darci una mano, possiamo tranquillamente utilizzare eventi Javascript (uno a caso… il click!) per far scaturire queste transizioni senza neanche troppa fatica.

Tenete pronto jQuery, anche se non è strettamente necessario, ci farà comodo per accedere velocemente agli eventi e alle classi CSS.

Guardate il file di prova Le basi delle transizioni CSS3

1. Preparare il file

Creiamo un nuovo file Html vuoto nel quale creiamo un elemento “cavia”. Un div, un button… quello che più vi piace, assegnategli un id così sarà più facile selezionarlo dopo.

<div id="elemento"></div>

Tramite Css dategli un colore di sfondo e delle dimensioni, giusto per creare un elemento di test, tipo 150×150 pixel con sfondo azzurro.

2. Creare le regole necessarie

Nella regola che definisce questo elemento dovremo anche inserire la proprietà “transition” (con il prefisso per Webkit) che dirà al browser di eseguire un’interpolazione quando rileva un cambiamento di proprietà sull’elemento:

#elemento{
  -webkit-transition: all 0.5s ease;
}

Visto che è un oggetto a posizionamento statico useremo  i margini per muoverlo, creiamo una classe che rappresenti lo stato finale della nostra animazione, dandogli un bel margin-left abbondante lo faremo muovere verso destra:

.spostamento{
  margin-left: 400px;
}

E per adesso non assegnatela a nessun elemento,

3. jQuery mette e toglie

Ora è il turno di jQuery! Dopo averlo incorporato dovremo dirgli che al click sul nostro id elemento dovrà fare qualcosa… alternare l’assegnazione e la rimozione di una classe, magari quella creata poco fa, sull’elemento corrente

$("#elemento").click(function(){
  $(this).toggleClass("spostamento");
});

Quindi:

1. si clicca sull’elemento
2. jQuery assegna la classe a quest’ultimo
3. la proprietà “transform” rileva un cambiamento di proprietà e il browser esegue la transizione
4. si clicca di nuovo e jQuery toglie la classe, altro cambiamento e la transizione va al contrario
5. e via così…

4. Opzionale – versione senza jQuery

Per chi vuole smanettare un pò di più con Javascript allo stato puro, il codice per fare (quasi tutto) quello ricreato poco fa:

var elemento = document.querySelector("#elemento");

elemento.addEventListener("click",cambia,false);

function cambia(){
  this.className += " sposta";
  this.removeEventListener("click",cambia,false);
}

Descrivendo le righe qui sopra:

1. Accedo all’oggetto con id elemento e lo memorizzo in una variabile Javascript
2. Aggiungo un event listener per dirgli di richiamare la funzione cambia al click
3. Nella funzione cambia: aggiungo la classe sposta all’elemento corrente
4. Nella funzione cambia: rimuovo l’event listener per evitare che continui ad aggiungere la stessa classe

Rimuovere la classe dall’elemento e alternare l’assegna/rimuovi è un po più complesso e va un po fuori l’argomento di questo breve tutorial… e poi ragazzi le librerie Javascript come jQuery esistono proprio per questo .

5. Dateci dentro!

A questo punto direi che è giunto il vostro momento di provare, testare e smanettare. Magari anche con eventi diversi dal click, jQuery UI mette a disposizione anche il trascinamento (drag)!

Ricordatevi che potete riprovare la demo e scaricare un file già completo e funzionante tornando verso l’inizio dell’articolo.

Tuttavia al contrario di quanto potreste credere, non è stato affatto un lavoraccio e non lo sarà neanche per voi, specialmente se avete un sito che usi come motore WordPress e installate il plug-in WPtouch!

Questo simpatico ed utile plugin una volta installato abilita una seconda interfaccia per il vostro sito che viene richiamata esclusivamente quando il vostro sito viene visitato da un dispositivo mobile, nonstante non possa essere personalizzata più di tanto la parte grafica offre in cambio una semplice gestione della navigazione mobile, permettendovi di eventualmente escludere certe sezioni del sito per chi lo visita da dispositivi mobili.

Potete vedere questo plugin in azione visitando questo MoebiusMania, Mixyourshot e Mohole Labs da iPhone et simili!