Transizioni CSS con i cambiamenti di stato in React

Una transition CSS interpola in modo fluido una proprietà tra due valori nel tempo, invece di passare istantaneamente da uno all'altro. La si dichiara sull'elemento con transition: property duration timing-function delay.

In React di solito non si animano manualmente i valori inline. Si alterna invece una classe o uno stile tramite lo stato e CSS gestisce per noi i fotogrammi intermedi.

Il modello più comune consiste nel mantenere un booleano in useState e sostituire una classe CSS quando cambia. Quando la classe cambia, la proprietà interessata riceve un nuovo valore e CSS anima la differenza.

Ad esempio, isOpen determina se l'elemento presenta la classe open e la classe open imposta un'altezza o un transform diversi.

Una configurazione tipica è const [isVisible, setIsVisible] = useState(false). Un pulsante chiama setIsVisible(v => !v) per invertirne il valore.

L'uso dell'aggiornamento funzionale v => !v evita di usare uno stato obsoleto quando più aggiornamenti vengono accodati, mantenendo affidabile l'alternanza.

Si costruisce dinamicamente className: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. La classe di base contiene la dichiarazione di transition, mentre le classi modificatrici contengono i valori iniziale e finale.

Mantenere transition nella classe di base sempre presente fa sì che l'animazione venga eseguita in entrambe le direzioni, sia in apertura sia in chiusura.

È possibile animare più proprietà contemporaneamente elencandole: transition: transform 300ms ease, opacity 300ms ease. Una dissolvenza con scorrimento combina una variazione di opacity con un translateY applicato a transform.

Animare entrambe le proprietà produce un ingresso curato, in cui l'elemento scorre verso l'alto mentre compare gradualmente.

transition-delay rimanda l'inizio di una transizione. Assegnando ritardi crescenti agli elementi di una lista si crea una cascata sfalsata, in cui ogni elemento viene animato poco dopo il precedente.

In React è possibile calcolare il ritardo inline, ad esempio style={{ transitionDelay: index * 50 + 'ms' }}.

La proprietà display non è animabile perché non dispone di valori intermedi tra none e block. Una transizione su di essa produce un salto istantaneo, non una dissolvenza.

Si animi invece opacity per ottenere la dissolvenza visiva e si imposti pointer-events: none in modo che l'elemento nascosto ignori i clic mentre è invisibile.

La funzione di temporizzazione determina come varia la velocità durante la durata. linear procede a velocità costante, ease inizia e termina lentamente e cubic-bezier(...) permette di definire una curva completamente personalizzata.

Le curve personalizzate sono ideali per ottenere effetti scattanti o rimbalzanti, ad esempio cubic-bezier(0.34, 1.56, 0.64, 1) per un leggero superamento del valore finale.

È possibile memorizzare le durate in proprietà personalizzate CSS come --speed: 300ms e riutilizzarle: transition: opacity var(--speed) ease. In questo modo i tempi restano coerenti tra i componenti.

React può persino impostare la variabile inline tramite style={{ '--speed': '500ms' }}, consentendo alle props di determinare i tempi dell'animazione.

I browser possono animare transform e opacity nel compositore GPU senza ricalcolare il layout né ridipingere. Animare proprietà come width, top o margin obbliga a eseguire il lavoro di layout a ogni fotogramma e può causare scatti.

Quando occorre spostare, ridimensionare o ruotare, si scelga transform; quando occorre creare una dissolvenza, si usi opacity.

Una transizione affidabile in React combina uno stato booleano, una classe modificatrice condizionale e una classe di base che dichiara transition su proprietà adatte alla GPU. Lo stato alterna la classe e CSS gestisce l'animazione.

In questo modo i componenti restano dichiarativi, sfruttando al contempo il browser per produrre movimenti fluidi.

Verifichi la comprensione delle animazioni ad alte prestazioni.

Ha imparato ad attivare le transizioni CSS alternando classi guidate dallo stato, ad animare insieme transform e opacity, a creare sequenze sfalsate con ritardi e a evitare di animare display usando opacity insieme a pointer-events.

Ha inoltre esaminato le funzioni di temporizzazione, le durate definite con variabili CSS e il motivo per cui le proprietà gestite dal compositore GPU mantengono fluido il movimento.