Souscrire
Blog iamvdo.meDans certains cas, comme la création d’un effet accordéon par exemple, il peut être utile d’appliquer une transition CSS sur la hauteur d’un élément, de height:0 (l’élement n’a pas de taille), jusqu’à height:auto (l’élément se dimensionne en fonction de son contenu).
Si vous avez essayé de réaliser cela, vous avez remarqué que les navigateurs ne savent pas animer la propriété auto. Il faut alors recourir à du javascript pour palier à ce problème.
Une solution existe cependant en CSS, même si l’effet final n’est pas strictement identique. Je m’explique. Prenons le code HTML suivant :
<div class="accordeon">
<h3>More informations...</h3>
<p>Some text</p>
</div>Appliquons-lui un peu de CSS :
.accordeon{
width:250px;
}
.accordeon p{
height:0;
transition:height 1s ease;
}
.accordeon:hover p{
height:auto;
}Testez votre code, l’effet de transition n’est pas appliqué. Il faudrait pour cela appliquer une hauteur fixe lors du hover.
Utilisons alors plutôt les transformations CSS pour notre effet. Le code CSS modifié :
.accordeon p{
transform: scaleY(0);
transition:transform 1s ease;
}
.accordeon:hover p{
transform: scaleY(1);
}Maintenant, notre animation est effective. Nous animons la propriété transform qui modifie notre élément de scaleY(0) à scaleY(1). Ajoutons la règle transform-origin pour que la transition se fasse depuis le haut de l’élément, comme ceci :
.accordeon p{
transform: scaleY(0);
transform-origin: 50% 0;
transition:transform 1s ease;
}
.accordeon:hover p{
transform: scaleY(1);
}Voilà. PS : le résultat final n’est pas identique à ce que l’on pourrait avoir avec height:0 vers height:auto puisque le texte inclus est transformé, au lieu d’apparaître progressivement. Néanmoins, l’effet peut être utilisé sans une seule ligne de JS, et cela sans fixer la hauteur de notre élément.
J’attends vos retours et/ou avis.
#1par Laurick, le 23 novembre 2011
Il doit manquer plusieurs lignes de code dans le source fourni car cela ne fonctionne pas du tout chez moi (firefox 8) alors que les boutons de démo fonctionnent bien, eux. J’ai bien essayé de faire du retro-codage à partir de ta page mais trop de styles, trop de temps. Dommage, ça a l’air bien sympa comme effet.
#2par Geoffrey, le 25 novembre 2011
Hello,
@Laurick : je ne pense pas qu’il manque grand chose, en dehors des préfixes vendeurs, certainement encore nécessaires sous Firefox 8.
Ah si, la balise fermante de
h3n’existe pas ;)@Vincent : sympa comme effet. Je me souviens que Raphaël avait tenté quelque chose il y a de ça un petit temps, mais il avait utilisé un
height: 0;et unheight: 28px;ou un truc dans ce genre.Ah, j’ai retrouvé la source : http://ie7nomore.com/fun/menu/
Peut-être moins cohérent lorsqu’on a besoin de plus de 28 px :D (enfin, 25 sur la source)
Bonne continuation ;)
#3par css3create, le 25 novembre 2011
@Geoffrey : bien vu le
h3non fermé, c’est corrigé.La démo de Raphaël est une bonne astuce, ce sont les
liqui sont animés au lieu du bloc entier...L’effet est encore différent mais fonctionne.@Laurick : oui, le code présenté n’est pas celui de la démo, mais c’est simplement le principe. Pas besoin d’en mettre plus pour comprendre, au contraire : trop de code embrouille plus qu’il n’aide à la compréhension.
Vincent
#4par bebe, le 17 avril
Bonjour,
ou est ce que je peux trouver le code source de ta demos, parce que j’ai beau tester, retester, j’ai pas ton resultat