CSS3: ATTIVARE LE TRANSIZIONI CON JQUERY

In questo articolo vi illustrerò in che modo attivare le transizioni CSS tramite un piccolissimo codice Jquery. Come tutti immagino sappiate, le “CSS Transitions” sono delle feature introdotte con il nuovo standard CSS3 che permettono di creare delle semplici animazioni per gli elementi html senza dover “scomodare” Javascript (se non sapete cosa sono le transizioni CSS, date una occhiata a “Come creare animazioni con le CSS transitions”

Normalmente, per attivare le transizioni, è necessario indicare quali proprietà di quale elemento si vogliono animare per poi creare una pseudoclasse (come ad esempio “:hover”) che accolga i “punti di arrivo” delle animazioni. Ma cosa fare nel caso si voglia, ad esempio, creare un div che venga reso visibile tramite la pressione di un bottone? Non esiste una pseudoclasse “:click()”, dopotutto. Per fare ciò dovremmo affidarci a Javascript e/o Jquery. Tuttavia utilizzando solamente questi due elementi, c’è il rischio di perdere tempo nella scrittura del codice anche solo per una semplicissima animazione (soprattutto con il solo Javascript!). Perciò vediamo insieme come creare una semplice animazione, bella e pulita, senza dover scomodare Javascript.

Iniziamo

Restiamo fedeli all’esempio fatto sopra e creiamo un div che venga reso visibile con tanto di animazione tramite la pressione di un bottone.

Innanzitutto creiamo il nostro bottone:

HTML

<input type="button" name="bott" id="bott" value="clicca qui!" />

Da notare che l’utilizzo di un bottone non è strettamente necessario, potete anche usare un altro div per attivarne un altro; insomma, dipende da voi.

Adesso che abbiamo il nostro bottone, andiamo a creare un div. Ovviamente, sta a voi decidere che stile dargli. Ai fini dell’esempio, non mi sono preoccupato di dargli uno stile particolare, e ho creato un semplicissimo div rettangolare:

HTML

<div class="prova_div" id="prova">
</div>

CSS


#prova{
border:1px solid black;
background-color:red;
width:150px;
height:100px;
}

Come risultato dovreste ottenere questo:

Classi e transizioni

Adesso entriamo nel vivo dell’azione!

Come già accennato prima, in CSS non esiste (ancora) una pseudoclasse “:click”, quindi il nostro obiettivo è trovare qualcosa che faccia le sue veci e che renda il nostro elemento dinamico al click (di un altro elemento, nel nostro caso).

A tal proposito, andiamo a definire la classe che abbiamo assegnato al nostro div. A questa classe deleghiamo le proprietà che le transizioni colpiranno e le transizioni stesse.

Nel nostro caso, vogliamo che il div appaia alla pressione del bottone. Per fare ciò andremo a settare la proprietà “opacity”.

Questa proprietà accetta valori che vanno da 0.0 a 1.0, quindi 0 significa che il div è invisibile e 1, invece, che è pienamente visibile (Nota: non utilizzare la proprietà “display”, giacché le transizioni non sono compatibili con questa proprietà):

CSS

.prova_div{
opacity: 0;
-ms.transition: opacity, 0.4s, ease, 0.25s;
-o-transition: opacity, 0.4s, ease, 0.25s;
-moz-transition: opacity, 0.4s, ease, 0.25s;
-webkit-transition: opacity, 0.4s, ease, 0.25s;
transition: opacity, 0.4s, ease, 0.25s;
}

Importante: ricordate che le CSS transitions sono relativamente recenti e non tutti i browser le supportano pienamente, quindi utilizzate SEMPRE i prefissi proprietari.

Adesso, non potendo usare una pseudoclasse, andiamo a creare un’altra classe che ne farà le veci, e quindi che accoglierà “i valori di arrivo” della nostra animazione, nel nostro caso solo di “opacity”:

 CSS

.prova_div2{
opacity: 1;
}

Adesso andiamo a vedere in che modo integrare Jquery e far partire le nostre transizioni.

Animiamo la pagina con Jquery

Importante: per chi non lo sapesse, Jquery è, di fatto, Javascript. Tuttavia utilizza una sua sintassi personalizzata e ha anche delle proprie funzionalità, quindi è necessario creare un collegamento alle librerie Jquery per poter utilizzare questo linguaggio. Le librerie si possono trovare sia sul sito ufficiale sia tra le librerie hostate da Google .

Avremo bisogno veramente di pochissime righe di codice Jquery, giusto lo stretto necessario per poter attivare le transizioni. A seconda del tipo di progetto che state portando avanti, così come per Javascript, potete decidere se includere il codice nell’head, in un documento esterno o nel body. A voi la scelta.

Quello che andremo a fare è abbinare l’handler “click()” di Jquery al nostro bottone “bott”, per poi utilizzare il metodo “toggleClass()” per poter sostituire dinamicamente la classe predefinita del nostro div con l’altra classe da noi creata.

Questo procedimento attiverà la transizione CSS e la cosa sensazionale è che il processo sarà reversibile! Cliccando nuovamente il bottone verrà ripristinata la classe predefinita e, in questo caso, il div sparirà nuovamente. Di fatto, trasformeremo il nostro bottone in uno switch per il nostro div.

Prima di tutto, creiamo una funzione che faccia da riferimento al nostro documento con Jquery:

HTML/Jquery

<script type=”text/javascript”>
$(function(){

});
</script>

All’interno di questa funzione, andiamo ad abbinare l’handler “click()” al bottone:

<script type="text/javascript">
$(function(){
$("#bott").click(function(){

});
});
</script>

Infine, inseriamo il metodo “toggleClass()”. Ciò che dobbiamo fare è indicare la classe di partenza nel primo set di parentesi  (per riferirsi agli elementi del documento, Jquery usa gli stessi simboli di CSS, quindi il “.” per le classi, il “#” per gli id e così via), nel secondo set di parentesi invece bisogna indicare la classe di arrivo (in questo caso senza il “.”).

Il codice finale sarà questo:

<script type="text/javascript">
$(function(){
$("#bott").click(function(){
$(".prova_div").toggleClass("prova_div2");
});
});
</script>

Il risultato finale sarà questo.

Il risultato non ha nulla da invidiare a ciò che si otterrebbe con il puro Jquery o Javascript, anzi abbiamo ottenuto un ottimo risultato spendendo solo 1/3 del tempo eventualmente necessario grazie alle transizioni.

Conclusioni

Le CSS Transitions sono state inventate per dare la possibilità a tutti di rendere dinamico il proprio sito senza dover necessariamente conoscere Javascript.

Jquery è stato inventato per permettere all’utente di non perdersi nei meandri del Javascript e di riuscire a ottenere gli stessi risultati che quest’ultimo linguaggio può dare nel minor tempo possibile. Va da sé che l’utilizzo combinato di questi due elementi possa dare risultati veramente soddisfacenti.

Fatemi sapere se questa guida vi è stata utile e in quali altri modi deciderete di usare Jquery e Transitions insieme.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Da sempre appassionato di PC e tecnologia in generale, ho creato e pubblicato il mio primo sito internet a 13 anni. Non avevo mai considerato il web design e la programmazione come un lavoro vero e proprio fino all'anno scorso quando, insieme alla mia più grande amica e collega, abbiamo deciso di lanciarci nel mondo della programmazione e del web design freelance.

Altri articoli scritti da

Articoli correlati

Altri articoli

Ecco qualche altro articolo che potresti trovare interessante:

6 commenti

    • Andrea Grilli
  1. jim
  2. Nicolas

Trackback e pingback

  1. CSS3: ATTIVARE LE TRANSIZIONI CON JQUERY | Your...
    […] In questo articolo vi illustrerò in che modo attivare le transizioni CSS tramite un piccolissimo codice Jquery. Come tutti …

Lascia un Commento

Current day month ye@r *