Animazioni di entrata e uscita senza librerie

Quando esegue il rendering condizionale con {show && }, React rimuove l'elemento dal DOM nell'istante in cui show diventa false. Non c'è tempo per un'animazione di uscita, perché il nodo è già scomparso.

Le animazioni di entrata sono semplici; quelle di uscita sono la vera sfida.

La soluzione più semplice è non smontarlo mai. Mantenga l'elemento renderizzato e animi opacity fino a zero, aggiungendo pointer-events: none quando è nascosto, per poi riportarla a uno quando viene mostrato.

Questo consente dissolvenze fluide in entrambe le direzioni, al costo di mantenere l'elemento nel DOM.

Per uno smontaggio reale, modelli una piccola macchina a stati con fasi come mounting, mounted, unmounting e unmounted. Il nodo viene rimosso solo al termine dell'animazione di uscita.

Lo stato determina quali classi di animazione vengono applicate in ogni fase.

È possibile incapsulare la macchina in un hook personalizzato, spesso chiamato useMount. Riceve la visibilità desiderata e restituisce se l'elemento deve trovarsi nel DOM, oltre alla fase corrente.

I componenti restano puliti perché la logica temporale risiede nell'hook riutilizzabile.

Seguendo le convenzioni comuni, al montaggio si applicano enter e poi enter-active, mentre durante lo smontaggio si applicano exit e poi exit-active. La classe di base imposta lo stato iniziale e quella attiva imposta lo stato finale con una transizione.

Alternarle nel frame corretto produce l'animazione.

Per sapere quando termina un'animazione di uscita, ascolti l'evento transitionend sull'elemento. Quando si verifica per l'uscita, si imposta lo stato su unmounted e si rimuove il nodo.

Questo collega lo smontaggio esattamente alla fine dell'animazione visiva, invece di basarlo su un timeout stimato.

È possibile racchiudere tutto in un componente Transition che accetta una prop in e i children. Mantiene i children montati durante l'animazione di uscita e applica le classi corrette a ogni fase.

Chi lo utilizza deve solo alternare in e ottiene automaticamente animazioni corrette di entrata e uscita.

Un dettaglio sottile: è necessario lasciare che il browser esegua il paint della classe iniziale prima di aggiungere quella active; altrimenti l'elemento scatta senza transizione. Un requestAnimationFrame o un reflow forzato tra le due garantisce che la transizione venga effettivamente eseguita.

Questo garantisce che il browser registri prima i valori iniziali.

La libreria react-transition-group fornisce i componenti Transition e CSSTransition che implementano esattamente questo schema, incluso il ciclo di vita delle classi e la tempistica dello smontaggio.

La versione fai-da-te riprende le sue idee fondamentali, perciò la libreria è facile da capire dopo averne costruita una personalmente.

Per una singola dissolvenza semplice, l'approccio con l'elemento mantenuto montato o un piccolo hook è sufficiente ed evita una dipendenza. Per molte transizioni coordinate, elenchi con aggiunte e rimozioni o sequenze complesse, una libreria fa risparmiare tempo e riduce i bug nei casi limite.

Scelga in base alla complessità delle animazioni effettivamente necessaria per la sua app.

Le animazioni di uscita richiedono che l'elemento rimanga in vita fino al completamento dell'animazione, che ciò avvenga non smontandolo mai, tramite una macchina a stati con transitionend oppure con una libreria.

Comprendere i meccanismi consente di scegliere l'approccio più leggero che soddisfi le proprie esigenze.

Ha imparato perché le animazioni di uscita sono difficili, due soluzioni (mantenere l'elemento montato e una macchina a stati per il montaggio), come transitionend determina il momento dello smontaggio e come creare un componente Transition riutilizzabile.

Ha anche visto quando scegliere react-transition-group invece di una soluzione fai-da-te.