Component & Layout

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é.

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.

Les diapositives restent en place et se fondent l’une dans l’autre au lieu de glisser.

Ajoute un « Carousel Crossfade » (aussi appelé fade slideshow ou carousel fade) sur [où].
Les diapositives doivent rester en place et se fondre lentement l’une dans l’autre, l’ancienne disparaissant pendant que la suivante apparaît en même temps, puis rester affichées quelques secondes avant le changement suivant.
Reviens à la première diapositive sans coupure, mets en pause au survol ou au focus, et ne fais pas défiler automatiquement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les diapositives défilent horizontalement dans une fenêtre visible et s’aimantent une à une en place.

Ajoute un carrousel (Carousel Slide, aussi appelé slider ou swipe carousel) sur [où].
Chaque étape doit faire glisser la rangée latéralement pour que la diapositive suivante s’aimante au centre, fluide et en ralentissant, avec les voisines qui dépassent sur les bords et les points de position qui suivent.
Avance d’une diapositive à la fois, prends en charge le balayage tactile ainsi que les boutons et les flèches du clavier, et donne des libellés aux contrôles pour les lecteurs d’écran.

Une carte s’agrandit jusqu’à devenir une vue de détail complète, en gardant un seul conteneur visible qui change de forme et révèle un nouveau contenu.

Ajoute une transition « Container Transform » (aussi appelée card expand to detail ou expandable card) sur [où].
À l’ouverture de la carte, le même conteneur doit s’agrandir en douceur jusqu’à la vue de détail complète, son ancien contenu disparaissant vite et le nouveau apparaissant en fondu une fois l’agrandissement presque terminé ; la fermeture joue l’inverse.
Garde un seul conteneur continu plutôt qu’un fondu entre deux boîtes séparées, et place le focus dans la vue de détail à l’ouverture.

Quand on fait glisser un élément, les autres s’écartent et se replacent dans le nouvel ordre.

Ajoute une « Drag-to-Reorder List » (aussi appelée sortable list) sur [où].
L’élément déplacé doit suivre directement le pointeur et se soulever légèrement, pendant que les autres s’écartent en douceur ; au relâchement, il doit se caler rapidement dans l’emplacement le plus proche.
Prends en charge le tactile comme la souris, et propose un moyen de déplacer les éléments au clavier, avec la nouvelle position annoncée aux lecteurs d’écran.

Un panneau latéral glisse depuis le bord gauche, droit ou supérieur, en poussant ou en recouvrant le contenu.

Ajoute un « Drawer Slide » (aussi appelé off-canvas ou side sheet) sur [où].
Le panneau doit glisser depuis le bord latéral par-dessus le contenu pendant que la page derrière s’assombrit, vite et en ralentissant en douceur, puis ressortir de la même façon à la fermeture.
Garde le focus clavier dans le tiroir ouvert, ferme-le avec Échap ou un clic sur la zone assombrie, et rends le focus au bouton qui l’a ouvert.

Après un changement de mise en page, les éléments glissent en douceur vers leurs nouvelles positions et tailles.

Ajoute une « FLIP Layout Animation » (aussi appelée layout animation ou First-Last-Invert-Play) sur [où].
Quand la mise en page change, chaque élément doit glisser de son ancienne position vers la nouvelle au lieu de sauter, vite au début puis en se posant en douceur.
Anime uniquement avec des transforms pour que la page ne recalcule pas sa mise en page à chaque image, et passe directement à la nouvelle mise en page si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les éléments apparaissent en fondu et en glissant quand on les ajoute, et s’animent en sortant quand on les retire, pendant que les voisins comblent l’espace.

Ajoute une animation « List Item Enter/Exit » (aussi appelée animated list) sur [où].
Un nouvel élément doit d’abord ouvrir sa place, puis apparaître en fondu en glissant ; un élément retiré doit d’abord disparaître en fondu, puis se replier pour que ses voisins comblent l’espace en douceur.
Garde un élément retiré en place jusqu’à la fin de sa sortie, pour que la liste ne saute jamais quand on ajoute ou retire des éléments.

Une ligne de contenu défile latéralement en boucle infinie, sans coupure.

Ajoute un texte défilant (Marquee) sur [où] : une bande qui défile horizontalement à l’infini, aussi appelée ticker.
Le contenu doit défiler de droite à gauche à une vitesse lente et régulière, en boucle continue sans saut visible.
Mets-le en pause au survol et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Quand on applique un filtre ou un tri, les tuiles de la grille se réorganisent, disparaissent en fondu ou glissent vers de nouveaux emplacements.

Ajoute un effet « Masonry / Grid Shuffle » (aussi appelé filterable grid animation) sur [où].
Quand un filtre est appliqué, les tuiles qui ne correspondent plus doivent rétrécir et disparaître en fondu sur place, pendant que les autres glissent en douceur vers leurs nouveaux emplacements ; retirer le filtre joue l’inverse.
Empêche la page autour de sauter pendant que la hauteur de la grille change, et fais des contrôles de filtre de vrais boutons qui indiquent le filtre sélectionné.

Une boîte de dialogue apparaît en fondu en grandissant légèrement depuis son centre, au-dessus d’une page assombrie.

Ajoute une animation « Modal Scale-Fade In » (aussi appelée dialog open animation ou zoom-fade dialog) sur [où].
La boîte de dialogue doit apparaître en fondu en grandissant légèrement depuis son centre pendant que la page derrière s’assombrit : rapide et discret, sans rebond.
Joue-la une fois à chaque ouverture, place le focus dans la boîte et garde-le dedans, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un menu flottant apparaît en fondu et s’agrandit depuis l’endroit où se trouve son déclencheur.

Ajoute une animation « Popover / Dropdown Open » (aussi appelée menu pop ou dropdown scale-fade) sur [où].
Le menu doit apparaître en fondu en grandissant légèrement depuis le coin proche de son déclencheur, rapide et net, puis disparaître un peu plus vite à la fermeture.
Garde-le ancré au déclencheur, ferme-le avec Échap ou un clic à l’extérieur, et expose l’état ouvert sur le déclencheur pour les lecteurs d’écran.

Un élément semble se déplacer et se redimensionner vers un élément correspondant à un nouvel endroit, comme s’il n’en formait qu’un.

Ajoute une « Shared Layout Animation » (aussi appelée shared element dans la page) sur [où].
Quand la sélection change, l’élément doit sembler se déplacer et se redimensionner en douceur de son ancienne place vers la nouvelle, en s’y posant délicatement, pour être perçu comme un seul objet et non deux.
N’affiche qu’une seule copie à tout moment et empêche la mise en page autour de sauter pendant le mouvement.

Un soulignement ou une pastille glisse de l’ancien onglet vers l’onglet nouvellement sélectionné.

Ajoute un « Tab Indicator Slide » (aussi appelé sliding underline ou active tab indicator) sur [où].
Quand un nouvel onglet est sélectionné, le soulignement doit glisser de l’ancien onglet vers le nouveau, rapide et en décélérant doucement, et s’étirer à la largeur du nouvel onglet si elle diffère.
Conserve une sémantique d’onglets correcte avec navigation aux flèches du clavier, et déplace l’indicateur sans glissement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bref message glisse ou apparaît en fondu au bord de l’écran, reste un moment puis s’en va ; les toasts empilés se décalent pour faire de la place.

Ajoute un « Toast Slide-In » (aussi appelé snackbar ou toast notification) sur [où].
Chaque message doit monter depuis le bord de l’écran en apparaissant en fondu, avec une décélération douce ; quand un nouveau toast arrive, ceux déjà affichés doivent se décaler en douceur pour lui faire de la place.
Annonce le message aux lecteurs d’écran sans voler le focus, laisse-le affiché assez longtemps pour être lu et mets en pause la fermeture automatique au survol ou au focus.

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.