MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Gestire le transizioni CSS3 con gli eventi Javascript
Sicuramente una delle cose che ha suscitato più interesse con i CSS3 è la possibilità di creare delle transizioni animate senza passare da Javascript o Flash e quindi ottenendo ottime performance in ambito mobile (smartphone e tablet).
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.
[avviso]Il codice in questo esempio è ottimizzato per i browser a base Webkit, in quanto ha come obiettivo principale il funzionamento su smartphone e tablet![/avviso]
Tenete pronto jQuery, anche se non è strettamente necessario, ci farà comodo per accedere velocemente agli eventi e alle classi CSS.
[btn url="http://moebiusmania.net/tutorial/2012/transizioniJs.html"]Guardate il file di prova[/btn] [btn url="http://www.html5today.it/tutorial/css3-transitions-tutorial-completo-transizioni-css3"] Le basi delle transizioni CSS3 [/btn]
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 150x150 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:
- si clicca sull'elemento
- jQuery assegna la classe a quest'ultimo
- la proprietà "transform" rileva un cambiamento di proprietà e il browser esegue la transizione
- si clicca di nuovo e jQuery toglie la classe, altro cambiamento e la transizione va al contrario
- 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:
- Accedo all'oggetto con id elemento e lo memorizzo in una variabile Javascript
- Aggiungo un event listener per dirgli di richiamare la funzione cambia al click
- Nella funzione cambia: aggiungo la classe sposta all'elemento corrente
- Nella funzione cambia: rimuovo l'event listener per evitare che continui ad aggiungere la stessa classe