Un panneau qui ne glisse pas — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Un panneau qui ne glisse pas

Variables, transitions, animations et projet · niveau 2

Énoncé

Le panneau « Horaires d'été » doit s'ouvrir en glissant quand on lui ajoute la classe ouvert :


.contenu {
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s, display 0.3s;
}

.panneau.ouvert .contenu {
  display: block;
  height: auto;
}

Il s'ouvre d'un coup. Mesuré dans Chromium, la hauteur du contenu vaut 0, puis 50 pixels 100 millisecondes après l'ajout de la classe, sans valeur intermédiaire. Expliquer pourquoi, puis proposer une version qui glisse vraiment, sans fixer de hauteur en pixels.

Corrigé

Deux raisons. D'abord, une transition interpole entre deux valeurs numériques ; auto n'en est pas une, le navigateur ne sait pas quelle hauteur viser : il saute directement. Ensuite, display: none retire l'élément de la mise en page ; display ne s'interpole pas, il bascule.

Une solution qui fonctionne partout : faire du contenu une grille d'une seule rangée, et animer la taille de cette rangée de 0fr à 1fr, qui sont, elles, deux valeurs interpolables. Le contenu réel est enveloppé dans un <div> qui masque ce qui dépasse.


.contenu {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
}

.contenu > div {
  overflow: hidden;
}

.panneau.ouvert .contenu {
  grid-template-rows: 1fr;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .contenu {
    transition:
      grid-template-rows 0.3s ease-out,
      visibility 0.3s;
  }
}

La valeur hidden de visibility retire le panneau fermé de la navigation au clavier et des lecteurs d'écran, comme le faisait display: none.

Mesure dans Chromium, page accordeon.html du dossier code/ch10/exercices : 0, puis 24,4 pixels à 100 millisecondes, 47,8 à 250, et 50 pixels à la fin. Les navigateurs les plus récents proposent aussi interpolate-size: allow-keywords, qui permet d'animer directement vers height: auto.