Tab Indicator Slide

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 fond de surbrillance glisse d’une carte à l’autre dans une grille pour suivre celle qui est survolée.

Ajoute un « Card Hover Effect » (aussi appelé sliding highlight card grid) sur [où].
Un fond de surbrillance doux doit apparaître derrière la carte survolée et glisser en douceur vers la carte suivante que vise le pointeur, puis disparaître en fondu quand le pointeur quitte la grille.
Fais en sorte que le focus clavier déplace la surbrillance de la même façon et que les cartes elles-mêmes ne bougent pas.

Un bouton rond glisse le long d’un rail dont la couleur change entre désactivé et activé.

Ajoute une animation d’interrupteur (Toggle Switch) (aussi appelé switch) sur [où].
À l’activation ou à la désactivation, le bouton rond doit glisser en douceur jusqu’à l’autre bout du rail pendant que la couleur du rail change : rapide et net, sans rebond.
Fais-en un vrai interrupteur accessible (role="switch" avec son état checked) qui fonctionne aussi au clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.

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.

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.