Comment animer des onglets et contrôles segmentés avec indicateur glissant
Guide pour animer des onglets et contrôles segmentés : pilule indicatrice partagée, transitions de panneaux, gestion du redimensionnement et ARIA.
À retenir
Un contrôle segmenté de haute qualité utilise un indicateur partagé en forme de pilule qui glisse sous les boutons d'onglets grâce à transform: translate et scaleX. Cela crée une continuité visuelle entre les sections. Les panneaux de contenu doivent apparaître avec un fondu doux et les touches fléchées doivent permettre de passer d'un onglet à l'autre.
Pilule glissante unique vs bordures individuelles
Plutôt que d'animer une bordure inférieure sous chaque onglet séparément, utilisez un seul élément d'arrière-plan qui se déplace jusqu'à l'onglet actif. L'œil perçoit alors un élément physique qui se déplace naturellement.
Calculs et physique de la pilule glissante
Mesurez la position left et le width de l'onglet actif dans le DOM et appliquez un ressort sur translateX et width. Pendant un saut entre onglets distants, un léger étirement de la largeur traduit l'inertie.
- Animez l'indicateur avec transform plutôt que left/width quand possible
- Recalculez automatiquement les coordonnées lors d'un redimensionnement (ResizeObserver)
- Assurez un contraste suffisant entre le texte et la pilule
- Évitez les rebonds excessifs qui nuisent à la lisibilité
Transitions des panneaux de contenu
Lors du changement d'onglet, le contenu entrant doit apparaître avec un fondu léger et un décalage de 4 à 8 px dans le sens de la navigation, sans à-coups verticaux.
Recommandations de navigation au clavier
Adoptez le modèle WAI-ARIA Tabs : role="tablist", role="tab" et role="tabpanel". Les utilisateurs doivent circuler entre onglets avec les touches fléchées et activer avec Entrée ou Espace.
Extrait d’implémentation en production
/* Sliding pill container */
.tab-list {
position: relative;
display: flex;
background: #f3f4f6;
padding: 4px;
border-radius: 12px;
}
.sliding-indicator {
position: absolute;
top: 4px;
bottom: 4px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}Principes clés à retenir
- Utilisez un indicateur partagé unique pour créer une continuité physique
- Ajustez la pilule aux changements d'écran avec ResizeObserver
- Naviguez entre onglets aux flèches du clavier selon le modèle ARIA
- Faites apparaître l'indicateur sans glissement sous mouvement réduit
Questions fréquentes
Sources
- Tabs Pattern — W3C WAI-ARIA Authoring Practices
- Segmented Buttons — Material Design 3