Openings- en sluitanimatie van een modal

Het animeren van het verschijnen en verdwijnen van een modaal venster heeft naast esthetiek ook een functioneel doel. Een plotselinge verschijning kan gebruikers laten schrikken; een vloeiende vervaging maakt de komst van het modale venster begrijpelijker en helpt gebruikers te zien waar het vandaan komt. Een verdwijnanimatie geeft aan dat de interactie is voltooid en dat de gebruiker terugkeert naar de pagina.

De overgangshulpmiddelen van Tailwind maken het eenvoudig om dekking en schaal tegelijk te animeren. Zo ontstaat een verzorgde vervaging met schaalverandering die past bij de kwaliteit van systeemeigen mobiele gebruikersinterfaces.

De achtergrond moet vervagen wanneer het modale venster wordt geopend en weer vervagen wanneer het wordt gesloten. Voeg transition-opacity duration-300 toe aan het achtergrondelement. Wissel via JavaScript tussen opacity-0 (verborgen) en opacity-100 (zichtbaar).

De achtergrond moet in de DOM blijven staan (gebruik dus niet hidden) om de vervaging te laten werken — begin in plaats daarvan met opacity-0 pointer-events-none en wissel naar opacity-100 pointer-events-auto.

De meest voorkomende animatie voor het verschijnen van een modaal venster is vergroten met vervaging: het dialoogvenster begint iets kleiner en transparant en groeit vervolgens naar de volledige grootte terwijl het ondoorzichtig wordt. Dit bootst na hoe modale vensters in iOS en Android verschijnen.

Voeg transition-all duration-300 toe aan het dialoogvenster. Wissel tussen scale-95 opacity-0 (de aanvankelijk verborgen toestand) en scale-100 opacity-100 (de zichtbare toestand). De korte duur van 300 ms houdt de animatie vlot.

Op mobiele apparaten schuift een onderpaneel vanaf de onderkant van het scherm omhoog in plaats van in het midden te verschijnen. Dat werkt ergonomischer bij bediening met de duim. Gebruik fixed bottom-0 inset-x-0 om het paneel onderaan vast te zetten en translate-y-full als aanvankelijk verborgen toestand, die je wisselt naar translate-y-0.

Voeg bovenaan een sleepgreep (w-10 h-1 rounded-full bg-gray-300 mx-auto mt-3) toe om aan te geven dat vegen mogelijk is.

De timingfunctie bepaalt hoe een animatie versnelt en vertraagt. Tailwind biedt vier hulpprogramma's voor versnelling: ease-linear, ease-in, ease-out en ease-in-out.

Gebruik voor het verschijnen van modale vensters ease-out: het element begint snel en vertraagt wanneer het de eindpositie bereikt, wat natuurlijk en prettig aanvoelt. Gebruik voor het verdwijnen ease-in: het element versnelt wanneer het verdwijnt, wat doelgericht aanvoelt. ease-in-out werkt goed voor omkeerbare overgangen, zoals schakelacties.

Een veelgemaakte fout is het modale venster meteen uit de DOM verwijderen (of met hidden verbergen) zodra het sluiten wordt gestart. Daarmee wordt de verdwijnanimatie afgebroken. Wacht in plaats daarvan tot de animatie is voltooid met de gebeurtenis transitionend voordat je het element verbergt.

Luister naar de gebeurtenis met { once: true }, zodat de handler slechts één keer per overgang wordt uitgevoerd en zich niet opstapelt. Voeg na de overgang hidden of pointer-events-none toe om interactie met het onzichtbare element te voorkomen.

Als de achtergrond en het dialoogvenster precies tegelijk worden geopend, kan dat abrupt aanvoelen. Bij een gelaagde animatie wordt eerst de achtergrond geopend en het dialoogvenster een fractie van een seconde later. Zo ontstaat een gelaagd onthullingseffect.

Bereik dit door de klasse delay-100 aan het dialoo­gelement toe te voegen, zodat de overgang 100 ms na die van de achtergrond begint. Verwijder de vertraging tijdens het sluiten, zodat dit snel verloopt.

Voor kritieke waarschuwingen (fouten en bevestigingen van destructieve acties) trekt een inzoomeffect meer aandacht dan een zachte schaalverandering. Begin het dialoogvenster met scale-50 en animeer naar scale-100 met een korte duration-150 voor een snelle verschijning die de aandacht opeist.

Gebruik dit spaarzaam — als je dramatische animaties overdrijft, raken gebruikers eraan gewend. Bewaar inzoomen voor echt belangrijke vragen waarbij je de onverdeelde aandacht van de gebruiker nodig hebt.

Voor animaties van modale vensters in Tailwind zijn er twee benaderingen: klassen wisselen (wat we tot nu toe hebben gedaan) en inline stijlen aanpassen via JavaScript. Klassen wisselen is de Tailwind-manier: stijlen blijven netjes in HTML-klassen en gedrag in JavaScript gescheiden.

Het aanpassen van inline stijlen (element.style.opacity = '0') doorbreekt de aanpak met hulpprogramma's en maakt stijlen moeilijker te controleren. Houd het bij het wisselen van klassen, tenzij je dynamische waarden nodig hebt die niet vooraf kunnen worden bepaald, zoals geanimeerde posities op basis van coördinaten uit een gebruikersinteractie.

Sommige gebruikers worden misselijk van animaties in gebruikersinterfaces. Zowel CSS als Tailwind respecteren de mediaquery prefers-reduced-motion. Gebruik motion-reduce:transition-none en motion-reduce:transform-none op geanimeerde elementen om overgangen uit te schakelen voor gebruikers die in de instellingen van hun besturingssysteem hebben aangegeven minder beweging te willen.

Dit is een toegankelijkheidsvereiste die vaak over het hoofd wordt gezien. Met deze hulpprogramma's voorkom je dat je geanimeerde modale vensters ongemak veroorzaken of problemen met bewegingsgevoeligheid uitlokken.

Een toastmelding is een tijdelijk, niet-blokkerend bericht dat vanuit een boven- of benedenhoek van het scherm naar binnen schuift. Gebruik fixed bottom-4 right-4 z-50 voor de positionering en animeer het element aanvankelijk met translate-y-2 opacity-0, waarna je overgaat naar translate-y-0 opacity-100.

Laat de toast na enkele seconden automatisch verdwijnen met setTimeout. Met transition-all duration-300 van Tailwind verlopen zowel het verschijnen als het automatisch vervagen bij het verdwijnen vloeiend.

In deze les heb je geleerd dat animaties van modale vensters werken door hulpprogrammaklassen voor dekking en schaal te wisselen (scale-95 opacity-0 naar scale-100 opacity-100) met transition-all duration-300; dat je bij verdwijnanimaties op transitionend moet wachten voordat je het element verbergt; en dat je toegankelijkheid voor beweging regelt met motion-reduce:transition-none om de besturingssysteeminstelling prefers-reduced-motion te respecteren. Hierna bouwen we vervolgkeuzemenu's.