Comment animer l'ouverture et la fermeture d'une fenêtre modale
Comment animer une boîte de dialogue pour qu'elle reste liée à son déclencheur : origine, rythme du fond, entrée et sortie, interruption et gestion du focus.
À retenir
Animez la modale depuis l'élément qui l'a ouverte, ou depuis la zone que l'utilisateur regardait, pour que le changement ait une origine spatiale. Faites apparaître le fond et bouger le panneau sur des rythmes différents, rendez la sortie plus rapide que l'entrée et gardez la gestion du focus en dehors de l'animation. Un panneau qui grandit depuis le centre de l'écran paraît générique.
Partez du déclencheur
Toute la technique tient à la continuité spatiale. Si une carte ouvre une fiche détaillée, le panneau peut s'étendre depuis cette carte ; si un bouton de la barre ouvre les réglages, le panneau peut émerger près de lui. L'utilisateur sait alors d'où vient la nouvelle couche et où elle retournera.
Bougez le fond et le panneau séparément
Le fond est souvent un changement d'opacité, peu coûteux ; le panneau doit bouger ou changer d'échelle. Les animer sur la même courbe fait ressembler l'écran entier à une image plate. Un fond légèrement retardé, ou qui s'efface plus vite, se lit comme de la profondeur.
- Fond : opacité uniquement
- Panneau : transformation et opacité
- Évitez d'animer le flou sur de grandes surfaces, car c'est coûteux
- Gardez une couleur pleine de repli pendant l'apparition du fond
Une sortie plus rapide que l'entrée
L'utilisateur sait déjà ce qui se ferme, donc la sortie n'a rien à lui apprendre. Une sortie plus courte le ramène aussi plus vite à sa tâche. Un schéma courant : une entrée un peu plus lente qui montre la forme du panneau, puis une fermeture rapide en fondu et réduction.
Rendez la transition interruptible
Si une modale peut s'ouvrir et se fermer vite, l'animation doit lire l'état courant au lieu de repartir de zéro. C'est la différence entre une transition et une machine à états : si l'utilisateur la ferme pendant l'ouverture, le panneau doit s'inverser depuis sa position.
Focus, échap et mouvement réduit
L'animation et le focus sont deux travaux distincts. Placez le focus dans la boîte à l'ouverture, gardez-le piégé tant qu'elle est ouverte et rendez-le au déclencheur à la fermeture ; le modèle de dialogue WAI-ARIA décrit le comportement clavier attendu. En mouvement réduit, remplacez le déplacement par un court fondu.
Les erreurs qui banalisent une modale
Une mise à l'échelle depuis zéro ressemble à une apparition, pas à un mouvement. Un long fondu donne une impression de lenteur. Animer le flou du fond sur grand écran peut faire chuter les images. Et bloquer le défilement avant le début de l'animation provoque un saut visible : corrigez ce saut d'abord.
Principes clés à retenir
- Donnez au panneau une origine spatiale, idéalement l'élément qui l'a ouvert
- Animez l'opacité du fond et la transformation du panneau séparément
- Gardez la sortie plus courte que l'entrée
- Une ouverture interrompue doit s'inverser depuis sa position actuelle
- La gestion du focus est indépendante de l'animation et doit continuer à fonctionner
Questions fréquentes
Sources
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev