Comment animer un accordéon sans à-coups
Pourquoi animer la hauteur coûte cher, les deux techniques fiables, comment traiter le contenu intérieur et les règles d'accessibilité à conserver.
À retenir
Animer la hauteur oblige le navigateur à recalculer la mise en page à chaque image, ce qui fait saccader les accordéons. La solution fiable consiste à animer une transformation ou un conteneur rogné plutôt que la hauteur, ou à mesurer le contenu et animer vers une valeur en pixels connue. Gardez le contenu lisible pendant le mouvement et ne laissez jamais l'animation casser aria-expanded ni l'accès au clavier.
Pourquoi animer la hauteur coûte cher
La hauteur est une propriété de mise en page. Quand elle change, le navigateur recalcule la position de tout ce qui se trouve en dessous, à chaque image. Sur un petit panneau cela passe souvent ; dans une longue page ou une liste d'accordéons, non. Les transformations et l'opacité peuvent être gérées par le compositeur.
Deux techniques qui fonctionnent
La première mesure la hauteur du contenu en JavaScript et anime de zéro à cette valeur en pixels, puis remet la hauteur à auto. La seconde garde le conteneur fixe et anime une ligne de grille de 0fr à 1fr, ou rogne une transformation. Les navigateurs ajoutent des tailles intrinsèques animables, mais la prise en charge n'est pas universelle.
Traitez le contenu, pas seulement la boîte
Un texte qui glisse en s'effaçant peut paraître flou. Un court fondu, ou un léger décalage des lignes intérieures, se lit mieux que des paragraphes déplacés verticalement. N'animez pas tous les enfants : choisissez ceux qui portent la hiérarchie.
Ouvrir lentement, fermer vite
Ouvrir révèle de l'information, donc l'utilisateur a besoin d'un instant pour la suivre ; fermer est un rejet et peut être plus rapide. Si plusieurs sections peuvent être ouvertes en même temps, raccourcissez la fermeture pour que la page se stabilise.
Les règles d'accessibilité que l'animation ne doit pas casser
L'en-tête doit être un bouton avec aria-expanded et le panneau doit être relié par aria-controls. Le contenu masqué ne doit pas être atteignable au clavier ni annoncé. Si vous animez via un conteneur, vérifiez qu'il ne piège pas le focus et ne laisse pas annoncer du contenu replié.
Mouvement réduit et longues listes
En mouvement réduit, supprimez le mouvement de hauteur et affichez le panneau immédiatement, ou utilisez un fondu très court. Dans les longues listes, n'animez que le panneau qui a changé et laissez le reste de la page se stabiliser sans mouvement.
Extrait d’implémentation en production
/* Grid-row technique: no JavaScript measurement */
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 220ms ease;
}
.panel[data-open="true"] {
grid-template-rows: 1fr;
}
.panel > div {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.panel {
transition: none;
}
}Principes clés à retenir
- La hauteur est une propriété de mise en page, donc l'animer peut faire chuter les images
- Mesurez le contenu ou rognez une transformation au lieu d'animer auto
- Faites apparaître le contenu au lieu de faire glisser des paragraphes
- L'ouverture peut être plus lente que la fermeture
- Gardez aria-expanded et l'accès clavier en état de marche
Questions fréquentes
Sources
- Accordion Pattern — W3C WAI-ARIA Authoring Practices
- Animation performance and frame rate — web.dev
- prefers-reduced-motion — MDN Web Docs