Toast Slide-In

L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.

Ajoute une animation d’entrée « Slide In » (aussi appelée slide in left, slide in right, slide in up ou slide in down) sur [où].
L’élément doit glisser depuis l’extérieur du bord de son conteneur jusqu’à sa place, entièrement opaque du début à la fin : rapide, avec une décélération douce et sans rebond.
Rogne-le au bord du conteneur pour qu’il ne chevauche pas ses voisins et ne crée pas de barres de défilement tant qu’il est dehors, et affiche-le directement à sa place si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une petite étiquette apparaît en fondu et se glisse à côté d’un élément après un court délai de survol.

Ajoute un « Tooltip Fade » (aussi appelé tooltip reveal) sur [où].
Après un court délai de survol, l’étiquette doit apparaître en fondu en se glissant légèrement à côté de l’élément, puis disparaître vite et sans délai quand le pointeur s’en va.
Affiche-le aussi au focus clavier, permets de le fermer avec Échap et relie-le à l’élément pour que les lecteurs d’écran le lisent.

Un panneau glisse depuis le bord inférieur, souvent déplaçable et aimanté à certaines hauteurs.

Ajoute un « Bottom Sheet Slide-Up » (aussi appelé bottom drawer ou sheet) sur [où].
Le panneau doit monter depuis le bord inférieur pendant que la page derrière s’assombrit, en ralentissant doucement jusqu’à sa place, sans rebond.
Joue-le une fois à chaque ouverture, fais-le redescendre à la fermeture, et garde le focus clavier dans le panneau tant qu’il est ouvert.

L’élément apparaît en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale.

Ajoute une animation d’entrée « Fade In Directional » (aussi appelée fade in left, fade in right ou fade in down) sur [où].
L’élément doit apparaître en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale : rapide et fluide, en ralentissant à l’arrivée, sans rebond.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un panneau de contenu s’agrandit en douceur jusqu’à sa pleine hauteur ou se réduit à zéro quand on bascule son en-tête.

Ajoute un accordéon (Accordion Expand-Collapse, aussi appelé collapse ou disclosure) sur [où].
Quand on appuie sur un en-tête, son panneau doit s’agrandir en douceur jusqu’à la hauteur réelle de son contenu, puis se refermer complètement à l’appui suivant, la flèche de l’en-tête pivotant en même temps : rapide et fluide, sans rebond.
Anime vers la hauteur réelle du contenu plutôt qu’une valeur fixe devinée, fais de l’en-tête un vrai bouton qui indique son état déplié, et rends le tout utilisable au clavier.

Un calque sombre translucide apparaît en fondu derrière une surcouche pour assombrir la page.

Ajoute un « Backdrop Scrim Fade » (aussi appelé overlay fade ou scrim) sur [où].
À l’ouverture de la surcouche, un calque sombre translucide doit apparaître doucement en fondu sur la page derrière, un peu plus lentement que la surcouche elle-même, puis disparaître à la fermeture.
Garde le scrim sombre en thème clair comme en thème sombre, et empêche la page derrière de défiler ou de recevoir des clics tant qu’il est affiché.