Utility per le transizioni

Le transizioni CSS rendono fluidi i cambiamenti di stato e li fanno percepire come intenzionali anziché improvvisi. Quando un pulsante cambia colore di sfondo al passaggio del mouse, una barra laterale scorre all'interno della pagina o un campo di input riceve un anello di messa a fuoco, le transizioni comunicano all'utente che è successo qualcosa e guidano la sua attenzione. Le utility per le transizioni di Tailwind permettono di aggiungere queste animazioni con una sola classe, senza ricorrere a CSS personalizzato per i casi d'uso più comuni.

La utility di base transition abilita le transizioni CSS per le proprietà animate più comuni: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform e filter. In genere basta aggiungere transition a un pulsante per animare in modo fluido i cambiamenti di colore al passaggio del mouse.

Usi utility di transizione mirate per animare solo proprietà specifiche. È più efficiente di transition-all, perché il browser non deve ricalcolare tutte le possibili proprietà animate a ogni fotogramma. Tailwind mette a disposizione transition-colors, transition-opacity, transition-shadow, transition-transform e transition-all per esigenze diverse.

transition-all applica una transizione simultaneamente a ogni proprietà CSS animabile. Sebbene sia comoda, può causare comportamenti imprevisti: ad esempio, proprietà del layout come height o width possono diventare animate quando si desiderava modificare solo i colori. È inoltre meno efficiente, perché il browser tiene traccia di tutte le proprietà. Quando possibile, usi utility di transizione specifiche; ricorra a transition-all solo quando ha davvero bisogno di animare insieme più proprietà non correlate.

Le utility di transizione funzionano abilitando la proprietà CSS transition. Le varianti di stato come hover:, focus: e group-hover: definiscono gli stati iniziale e finale tra i quali avviene l'animazione. Posizioni sempre la classe transition sull'elemento di base, non all'interno della variante, in modo che si applichi in entrambe le direzioni: la transizione viene eseguita sia entrando nello stato sia uscendone.

Per fare comparire e scomparire gradualmente gli elementi, è necessario applicare una transizione a opacity e gestire anche visibility o display. Le transizioni CSS non possono animare il passaggio da o verso display: none, quindi per semplici effetti di dissolvenza usi opacity insieme a pointer-events-none. Per gli elementi che devono scomparire davvero, uscendone dall'ordine di tabulazione, combini le transizioni dell'opacità con la commutazione delle classi tramite JavaScript.

Le transizioni delle trasformazioni sono particolarmente fluide perché vengono eseguite dalla GPU invece di attivare ricalcoli del layout. Le utility scale-*, rotate-*, translate-* e skew-* di Tailwind vengono tutte animate in modo fluido con transition-transform. Gli effetti di ridimensionamento su card e pulsanti, gli effetti di rotazione sulle icone e gli effetti di scorrimento sui pannelli usano tutti questo approccio per ottenere le migliori prestazioni.

Alcuni utenti soffrono di cinetosi o convulsioni a causa delle animazioni e impostano il sistema operativo su Riduci movimento. Tailwind fornisce le varianti motion-reduce: e motion-safe:, che si attivano in base alla media query prefers-reduced-motion dell'utente. Usi motion-safe: per applicare le animazioni solo quando l'utente non ha richiesto la riduzione del movimento, rendendo le transizioni accessibili per impostazione predefinita.

Le transizioni dello stato di messa a fuoco sono particolarmente importanti per la navigazione da tastiera. Quando un utente raggiunge un campo di input o un pulsante premendo Tab, l'anello di messa a fuoco dovrebbe comparire gradualmente invece di apparire all'improvviso. Applichi transition a tutti gli elementi interattivi, così la transizione dell'anello di messa a fuoco risulta curata quanto quella al passaggio del mouse. Per un'esperienza da tastiera ottimale, includa focus:ring-* e focus:ring-offset-* insieme a una transizione.

Può combinare più utility di transizione specifiche su un singolo elemento per animare solo un insieme preciso di proprietà. Tailwind le compone usando la proprietà CSS abbreviata transition-property. Sovrapponendo transition-colors e transition-shadow sullo stesso elemento, sia i colori sia le ombre vengono animati, mentre le altre proprietà, come le trasformazioni, cambiano istantaneamente.

Ecco un link di navigazione realistico con transizioni completamente curate: lo sfondo appare gradualmente al passaggio del mouse, il colore del testo cambia contemporaneamente, la sottolineatura si estende da sinistra verso destra usando una trasformazione di scala e gli stati di messa a fuoco corrispondono esattamente allo stile al passaggio del mouse. Ogni interazione risulta intenzionale e fluida, senza una sola riga di CSS personalizzato.

In questa lezione ha imparato che la utility di base transition abilita animazioni fluide per le proprietà più comuni, che le utility di transizione specifiche come transition-colors e transition-transform sono più efficienti di transition-all e che la variante motion-safe: assicura che le animazioni vengano applicate solo quando l'utente non ha richiesto la riduzione del movimento. Nella prossima lezione controlleremo la durata delle transizioni e le funzioni di temporizzazione.