Les vues modales bloquent l'interface utilisateur pour afficher des messages importants. Découvrez comment animer des vues modales dans vos applications.
Les vues modales concernent les messages importants, pour lesquels vous avez de très bonnes raisons de bloquer l'interface utilisateur. Utilisez-les prudemment, car elles sont gênantes et peuvent facilement nuire à l'expérience utilisateur si vous en faites trop. Toutefois, dans certaines circonstances, ce sont les vues appropriées à utiliser, et l'ajout d'animations leur donnera vie.
- Utilisez les vues modales avec parcimonie. Les utilisateurs sont frustrés si vous interrompez inutilement leur expérience.
- L'ajout d'une échelle à l'animation donne un joli effet de chute.
- Se débarrasser rapidement de la vue modale lorsque l'utilisateur la ferme. Cependant, affichez la vue modale à l'écran un peu plus lentement afin de ne pas surprendre l'utilisateur.
La superposition modale doit être alignée sur la fenêtre d'affichage. Définissez donc sa position sur fixed:
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
will-change: transform, opacity;
}
Son opacity initial est de 0, et il n'est donc pas visible. Sa pointer-events doit également être définie sur none pour que les clics et les gestes soient transmis. Sans cela, toutes les interactions sont bloquées, ce qui empêche la page entière de répondre. Enfin, comme il anime ses opacity et transform, ceux-ci doivent être marqués comme étant modifiés avec will-change (voir aussi Utiliser la propriété will-change).
Lorsque la vue est visible, elle doit accepter les interactions et avoir une opacity de 1:
.modal.visible {
pointer-events: auto;
opacity: 1;
}
Désormais, chaque fois que la vue modale est requise, vous pouvez utiliser JavaScript pour activer/désactiver la classe "visible" :
modal.classList.add('visible');
À ce stade, la vue modale apparaît sans animation. Vous pouvez donc l'ajouter (voir aussi Lissage de vitesse personnalisé):
.modal {
transform: scale(1.15);
transition:
transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
L'ajout de scale à la transformation fait apparaître la vue légèrement sur l'écran, ce qui est un bel effet. La transition par défaut s'applique aux propriétés de transformation et d'opacité avec une courbe personnalisée et une durée de 0,1 seconde.
La durée est cependant assez courte, mais elle est idéale lorsque l'utilisateur ferme la vue et souhaite revenir à votre application. L'inconvénient est qu'elle est probablement trop agressive pour l'affichage de la vue modale. Pour résoudre ce problème, remplacez les valeurs de transition de la classe visible:
.modal.visible {
transform: scale(1);
transition:
transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
Maintenant, la vue modale met 0,3 seconde pour apparaître à l'écran, ce qui est un peu moins agressif, mais elle est ignorée rapidement, ce qui appréciera.