Faire une transition CSS height: auto avec display:grid
transition: height demande des hauteurs explicites, or auto n'en donne justement pas ; c'est le problème et nous allons voir comment le régler dans cet article grâce à grid
Accueil du blog
Derniers articles
CSS
JS
CDC
Tout le monde a essayé au moins une fois de faire une transition en hauteur avec
height pour s'apercevoir que non, ça ne marche pas, alors que "ben pourtant je comprends pas, la hauteur est bonne sans la transition".
height, il va falloir trouver la hauteur précise souhaitée avant de lancer la transition de façon à ce qu'elle ait tous les éléments avant de débuter (en particulier distance/durée), et pour ce faire, il y a quelques moyens de l'obtenir, soit on la connait et la question est réglée, soit on l'ignore et on peut se tourner vers max-height en particulier, mais il faut toujours rentrer une valeur, de plus complètement fantaisiste puisque justement elle est censée être inatteignable, sans compter deux soucis : En cas de valeur dépassée par le contenu il faudra gérer le débordement et l'animation devra prendre en compte l'augmentation inutile de hauteur.
Aujourd'hui, je suis content de vous montrer qu'on peut faire plus simple et plus sereinement, prenons cet exemple de base :
pour la partie concernée, le HTML est désespérément simple :
<div class="mainCol">
<div class="sbD">
<span class="ft12"><strong>Colonne</strong></span>
</div>
<div class="subCol">
<div id="ovF">
<p class="ft10">Voici du texte</p>
</div>
</div>
</div>
“It's a kind of magiiic !”
Les trois endroits qui nous intéressent sont mainCol, ovF et subCol, actuellement sans aucune valeur CSS.
Appliquons maintenant une pincée de CSS, passez votre souris au-dessus du carré bleu et voilà le résultat :
Sans hauteur connue, sans calcul, sans JS, sans valeur démesurée, juste avec display:grid, une magnifique transition pour la hauteur !
Voici l'idée:
#ovF{ /*Tout d'abord, nous cachons le contenu -- Attention, ici une ID parce qu'il est seul*/
overflow:hidden; /*il faudra penser à modifier (cf ci-dessous) si plusieurs éléments sont présents*/
}
.subCol {
display: grid; /*Ensuite nous appliquons un display grid*/
grid-template-rows: 0fr; /*Nous plaçons l'indice de flexibilité, ici 0*/
transition: 450ms grid-template-rows ease /* et la transition*/
}
.mainCol:hover .subCol{ /* Quand la souris passe sur le container mainCol, */
grid-template-rows: 1fr; /*nous laissons la div subCol s'étendre de une unité*/
}
Comme vous le constatez, il n'y a aucune donnée de hauteur dans ce code : plus simple est impossible, et voici donc ce que ça peut faire en situation, genre Menu ou Faq :
“Dans ce cas précis...”
#ovF /*qui devient*/ .subCol > div par exemple, juste pour éviter les multiples id's dans votre page.
“Et le petit bonus !”
Et pour ceux qui se demandent si ça peut le faire en cliquant plutôt qu'en survolant, la réponse est "oui:"
Un petit coup de JS pour remplacer le :hover (à supprimer de fait), ça donne ça:
Le code en quelques mots avec les étapes :
document.querySelectorAll(".mainCol").forEach(mc => {
mc.addEventListener("click", () => { //on clique sur une colonne
document.querySelectorAll(".subCol").forEach(sc => {
sc.style.gridTemplateRows = `${0}fr`; //on ferme tous les sous-containers
});
mc.querySelector(".subCol").style.gridTemplateRows = `${1}fr`; //on ouvre LE container contenu dans la colonne
});
});
J'ai essayé d'être le plus clair possible, mais si vous avez des questions, un doute, une critique, n'hésitez pas à me contacter https://gb-net.fr/contact
Pas encore de commentaire
