JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Fra i fautori della rinascita di JavaScript come linguaggio frontend si possono senza dubbio annoverare le librerie di animazione come moo.fx e script.aculo.us. Grazie alla loro introduzione, oggi è molto semplice aggiungere dinamicità alle pagine web senza dover ricorrere a plugin come Flash.

Negli ultimi periodi, tuttavia, si sta facendo strada una tecnica che delega gli effetti di transizione ai nuovi moduli CSS3 transitions e transforms, ormai largamente supportati dalle ultime versioni dei browser principali.

Il vero problema derivante dall'uso di queste proprietà CSS sta nel fatto che, essendo direttamente cablate nel codice, non offrono la flessibilità e l'adattabilità delle librerie JavaScript. Fortunatamente, però; ognuna delle proprietà CSS per regolare transizioni e trasformazioni è rintracciabile nella proprietà style degli elementi del DOM.

Perché usare i CSS per le animazioni

Per molti versi, i moduli CSS3 dedicati alle animazioni svolgono le stesse operazioni di una libreria JavaScript, ma in modo nativo. Ne conseguono:

• un minor dispendio di memoria rispetto ad altre soluzioni
• un minor peso delle pagine web, visto che potremo far a meno di includere librerie JavaScript di effetti.

L'altra faccia della medaglia è che molto probabilmente sarà necessario cambiare il modo di sviluppare e progettare il frontend di un sito: mancando il supporto a questi moduli nelle vecchie versioni dei browser ed in IE, dovremo iniziare a pensare in termini di Progressive Enhancement, oppure dovremo prevedere una soluzione alternativa per i browser meno evoluti.

Per iniziare, potremmo realizzare in CSS solo gli effetti secondari, affidandoci a JavaScript per tutte le animazioni fondamentali (ed in un'interfaccia web solo poche lo sono veramente).

Transizioni CSS via JavaScript

Tutte le proprietà del modulo CSS3 Transitions sono rintracciabili e modificabili a partire dalla proprietà style di un nodo del DOM. Come sempre dovremo utilizzare una notazione CamelCase:

/* CSS */
-webkit-transition-property: 'height';

/* JavaScript */
nodo.style.WebkitTransitionProperty = 'height';

Naturalmente, come in altri casi, possiamo impostare più propertà attraverso shortcode specifici:

/* JavaScript */
//proprietà, durata e andamento 
nodo.style.WebkitTransition = 'height 200ms ease-in-out';

Prefissi

Come per i fogli di stile, anche in JavaScript le proprietà di transizione devono essere precedute dal prefisso del produttore del browser per essere riconosciute dal motore di rendering. Poiché le proprietà con prefissi non riconosciuti vengono scartate senza dare errore, possiamo allargare il supporto dei nostri script preservandone la funzionalità:

var nodo = document.getElementById('mioNodo'),
    style = nodo.style,
    value = 'height';

// Safari >= 3.2, Chrome >= 6
style.WebkitTransitionProperty = value;

// Firefox >= 4
style.MozTransitionProperty = value;

// Opera >= 10.50
style.OTransitionProperty = value;

// IE >= 9 
style.msTransitionProperty = value;

// altri browser KHTML 
style.KhtmlTransitionProperty = value;

// in vista di un futuro senza
// prefissi!
style.transitionProperty = value;

Per semplicità, in questo articolo immagineremo di lavorare in ambiente Webkit, mentre per approfondire le tematiche legate alle transizioni CSS potete fare riferimento a questo articolo.

Eventi

Oltre ad impostare le proprietà di una transizione, è possibile associarvi una funzione da lanciare alla fine, replicando così il funzionamento di molte librerie JavaScript. L'evento cui agganciare la funzione è transitionend con due varianti proprietarie implementate da Webkit e Opera, rispettivamente webkitTransitionEnd e oTransitionEnd:

nodo.addEventListener('transitionend', function () {
    alert('Transizione finita!');
}, false);

Ecco un esempio pratico di transizione dinamica con funzione di callback (da visualizzare con Chrome/Safari).

Link utili

• moo.fx
• script.aculo.us

Altri articoli

Altre guide

Altre newsletter