Animazione di apertura e chiusura della modale

Animare l'apertura e la chiusura di una modale ha uno scopo funzionale che va oltre l'estetica. Un'apparizione improvvisa può spaventare gli utenti; una dissolvenza in entrata fluida contestualizza l'arrivo della modale e aiuta gli utenti a capire da dove proviene. Un'animazione in uscita segnala che l'interazione è completata e che l'utente sta tornando alla pagina.

Le utility di transizione di Tailwind rendono semplice animare insieme opacità e scala, creando un raffinato effetto di dissolvenza e ridimensionamento, in linea con la qualità dei pattern nativi delle interfacce utente mobili.

Lo sfondo dovrebbe eseguire una dissolvenza in entrata quando la modale si apre e una dissolvenza in uscita quando si chiude. Aggiunga transition-opacity duration-300 all'elemento dello sfondo. Attivi e disattivi opacity-0 (nascosto) e opacity-100 (visibile) tramite JavaScript.

Lo sfondo deve rimanere nel DOM (senza usare hidden) affinché la dissolvenza funzioni; lo inizializzi invece come opacity-0 pointer-events-none e lo trasformi in opacity-100 pointer-events-auto.

L'animazione di apertura più comune per una modale è una crescita con dissolvenza: la finestra di dialogo inizia leggermente più piccola e trasparente, quindi raggiunge la dimensione completa diventando opaca. Questo effetto riproduce il modo in cui appaiono le modali in iOS e Android.

Aggiunga transition-all duration-300 al pannello della finestra di dialogo. Passi da scale-95 opacity-0 (stato iniziale nascosto) a scale-100 opacity-100 (stato visibile). La breve durata di 300 ms mantiene l'animazione reattiva.

Sui dispositivi mobili, un bottom sheet scorre dal fondo dello schermo invece di apparire al centro. Questa soluzione è più ergonomica per l'interazione con il pollice. Utilizzi fixed bottom-0 inset-x-0 per ancorare il pannello in basso e translate-y-full come stato iniziale nascosto, da trasformare in translate-y-0.

Aggiunga una maniglia di trascinamento (w-10 h-1 rounded-full bg-gray-300 mx-auto mt-3) in alto per indicare che è possibile eseguire uno swipe.

La funzione temporale determina in che modo un'animazione accelera e rallenta. Tailwind offre quattro utility di easing: ease-linear, ease-in, ease-out e ease-in-out.

Per l'apertura delle modali, utilizzi ease-out: l'elemento parte velocemente e rallenta mentre raggiunge la posizione finale, creando una sensazione naturale e soddisfacente. Per la chiusura, utilizzi ease-in: l'elemento accelera mentre scompare, dando una sensazione intenzionale. ease-in-out funziona bene per transizioni reversibili, come le azioni di attivazione e disattivazione.

Un errore comune consiste nel rimuovere la modale dal DOM (o nasconderla con hidden) immediatamente quando viene avviata la chiusura. In questo modo si interrompe l'animazione in uscita. Attenda invece il completamento dell'animazione utilizzando l'evento transitionend prima di nascondere l'elemento.

Ascolti l'evento con { once: true }, così il gestore viene eseguito una sola volta per transizione e non si accumula. Dopo la transizione, aggiunga hidden o pointer-events-none per impedire l'interazione dell'utente con l'elemento invisibile.

Aprire lo sfondo e la finestra di dialogo esattamente nello stesso momento può risultare brusco. Un'animazione a cascata apre prima lo sfondo e poi la finestra di dialogo una frazione di secondo più tardi, creando un effetto di rivelazione a livelli.

Ottenga questo risultato aggiungendo una classe delay-100 all'elemento della finestra di dialogo, in modo che la sua transizione inizi 100 ms dopo quella dello sfondo. Rimuova il ritardo durante la sequenza di chiusura per mantenerla rapida.

Per gli avvisi critici (errori e conferme di azioni distruttive), un effetto di zoom in entrata attira maggiormente l'attenzione rispetto a una crescita delicata. Inizi la finestra di dialogo con scale-50 e animi il passaggio a scale-100 con un rapido duration-150, per un ingresso scattante che catturi l'attenzione.

Utilizzi questo effetto con moderazione: esagerare con le animazioni spettacolari desensibilizza gli utenti. Riservi lo zoom in entrata ai messaggi realmente importanti, quando è necessaria la completa attenzione dell'utente.

Per animare una modale in Tailwind esistono due approcci: il cambio delle classi (che abbiamo utilizzato finora) e la modifica degli stili inline tramite JavaScript. Il cambio delle classi è l'approccio tipico di Tailwind: mantiene chiaramente separati gli stili nelle classi HTML e il comportamento in JavaScript.

La modifica degli stili inline (element.style.opacity = '0') contraddice l'approccio utility-first e rende più difficile verificare gli stili. Si attenga al cambio delle classi, a meno che non siano necessari valori dinamici non predeterminabili, come posizioni animate basate sulle coordinate dell'interazione dell'utente.

Alcuni utenti soffrono di cinetosi a causa delle animazioni dell'interfaccia. Sia CSS sia Tailwind rispettano la media query prefers-reduced-motion. Utilizzi motion-reduce:transition-none e motion-reduce:transform-none sugli elementi animati per disabilitare le transizioni per gli utenti che hanno richiesto la riduzione del movimento nelle impostazioni del sistema operativo.

Si tratta di un requisito di accessibilità spesso trascurato. L'aggiunta di queste utility garantisce che le modali animate non causino disagio né attivino problemi di sensibilità al movimento.

Una notifica toast è un messaggio temporaneo e non bloccante che scorre da un angolo superiore o inferiore dello schermo. Utilizzi fixed bottom-4 right-4 z-50 per il posizionamento e la animi inizialmente con translate-y-2 opacity-0, facendola passare a translate-y-0 opacity-100.

Chiuda automaticamente la toast dopo alcuni secondi utilizzando setTimeout. transition-all duration-300 di Tailwind gestisce in modo fluido sia l'ingresso sia la dissolvenza automatica in uscita.

In questa lezione ha imparato che: le animazioni delle modali funzionano alternando le classi utility di opacità e scala (scale-95 opacity-0 e scale-100 opacity-100) con transition-all duration-300; le animazioni in uscita richiedono di attendere transitionend prima di nascondere l'elemento; e l'accessibilità del movimento viene gestita con motion-reduce:transition-none per rispettare l'impostazione del sistema operativo prefers-reduced-motion. Ora passeremo ai menu a discesa.