Dopo alcuni tutorial introduttivi siamo finalmente giunti ad una delle funzionalità più interessanti, per quanto semplice da usare, che MooTools offre: stiamo parlando delle transizioni. Si tratta in sostanza della possibilità di far variare una proprietà CSS, tipicamente dimensioni o colore di sfondo, da un valore iniziale ad uno finale in maniera progressiva. Ad esempio è possibile far ingrandire un DIV da 100 pixel di larghezza a 300 senza alcuna difficoltà tramite la funzione tween.
Supponiamo di avere il seguente DIV:

<div style="width:100px; height:100px; background-color:#ff0000" id="testDiv">
    Testo di prova
</div>

Inizialmente è largo 100 pixel, se volessimo farlo passare a 300 pixel con MooTools sarebbe sufficiente la seguente riga di codice:

$("testDiv").tween("width", "300px");

Dove "width" è proprio il nome della proprietà CSS e "300px" è il suo valore. Un'altra possibilità sarebbe quella di variare il colore di sfondo:

$("testDiv").tween("background-color", "#0000ff");

Se si vogliono combinare più transizioni assieme non bisogna usare la funzione tween ma morph, che è molto simile eccetto per il fatto che accetta come parametri una coppia chiave-valore di proprietà CSS, ad esempio:

$("testDiv").morph({
    "height": "300px",
    "background-color": "#0000ff"
}); 

SCORCIATOIE PER TWEEN: FADE E HIGHLIGHT
Un esempio di quello che si può realizzare con grandissima facilità con le transizioni.

Esistono poi due scorciatoie per operazioni comuni che si svolgono con tween che risultano essere molto comode: highlight e fade. La prima non fa altro che far "illuminare" temporaneamente lo sfondo dell'elemento su cui stiamo lavorando del colore che gli si passa. Ad esempio per fare evidenziare temporaneamente di verde il nostro DIV potremmo usare la seguente sintassi:

$("testDiv").highlight('#00ff00');

Nota: per specificare i colori usare sempre il formato esadecimale poiché MooTools deve eseguire operazioni di incremento numerico per passare da un colore ad un altro, e non ha una funzionalità di conversione automatica.
fade invece è ancora più utile, e serve, come si può intuire, per fare sparire e riapparire un elemento rendendolo progressivamente più o meno trasparente. Accetta come parametri "in" o "out" per farlo apparire o sparire gradualmente, "show" o "hide" per farlo apparire o sparire senza transizioni, "toogle" per farlo sparire se è attualmente visibile e apparire altrimenti. Infine è anche possibile passare alla funzione un valore decimale compreso tra 0 e 1 per decidere la percentuale di trasparenza verso la quale effettuare il fade.

$("testDiv").fade("in");
$("testDiv").fade("out");
$("testDiv").fade("toggle");

Un semplice ma efficace esempio di quello che si può realizzare con fade è il seguente. Dati due DIV sovrapposti vogliamo far sparire quello sopra e mostrare quello sotto. Il codice HTML:

<div style="position:relative; height:100px">
    <div id="div1" style="width:100px; height:100px; background-color:#ff0000; position:absolute">
        Div 1
    </div>
    <div id="div2" style="width:100px; height:100px; background-color:#000ff0; position:absolute">
        Div 2
    </div>
</div>
<div><input type="button" id="exchangeButton" value="Scambia"></div>

E quindi il codice JavaScript:

function doExchange() {
    $("div1").fade("toggle");
    $("div2").fade("toggle");
}

window.addEvent("domready", function () {
    $("exchangeButton").addEvent("click", doExchange);
    $("div2").fade("hide");
})

Inizialmente avremo div2 nascosto e alla pressione del pulsante Scambia entrambi cambieranno il loro stato di visibilità divenendo uno trasparente e l'altro invisibile. Un effetto semplice e di elevata qualità.

PERSONALIZZAZIONI DELL'EFFETTO DI TRANSIZIONE
Velocità, risoluzione e gestione di più transizioni contemporanee. 

Le transizioni sin qui viste hanno delle impostazioni personalizzabili, principalmente 3:

• fps: imposta il numero di frame per secondo da disegnare, maggiore è questo numero più l'animazione sembrerà fluida; un valore ragionevole è quello di default, 50;
• link: definisce il comportamento da adottare in caso si sovrappongano più transizioni contemporaneamente; accetta tre possibili valori "ignore", "cancel" e "chain" che rispettivamente significano di ignorare ogni comando ricevuto prima della fine della transizione corrente, di annullare la transizione corrente in favore del comando più recente e infine di accodarli e di eseguirli in successione;
• duration: regola la durata della transizione in millisecondi, accetta, oltre ad un valore numerico, i tre valori "short", "normal" e "long", ovvero 250, 500 e 1000 ms;

Per regolare queste impostazioni bisogna impostare (tramite la funzione set) la proprietà "tween" o "morph" a seconda di cosa si sta usando:

testDiv.set('tween', {
    fps: 25, 
    link: "chain",
    duration: "long"
});

testDiv.set('morph', {
    fps: 25, 
    link: "chain",
    duration: "long"
});