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 2012
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
#5par Philippe, le 6 juin 2012
Bonjour, cela marche parfaitement sur mon site (http://saintlaurentneige.fr) avec Chrome. Mais ne fonctionne absolument pas avec FireFox pourtant j’ai le 12. Comprend pas.
Cordialement et merci encore pour toutes vos supers astuces....
#6par gcyrillus, le 28 juin 2012
salut, l’idée du scaleY() est excellente !
#7par Mondemen, le 10 août 2012
Je voudrais savoir si les nouveaux attribut css3 tel que transform et transition peuvent être mis dans du javascript pour qu’il soient modifier car je voulais faire un menu déroulant progressif mais au clic avec les transition css et sachant aussi que les attributs sont encore malheureusement préfixé
#8par Greyback, le 5 septembre 2012
Bonjour,
rien à faire ça ne marche pas
#9par madry, le 9 novembre 2012
Ce script ne fonctionne pas bien sous I.E , du moins sur certaine version
#10par B.Pagès, le 4 janvier 2013
Bonjour, je ne comprends pas comment transition:transform 1s ease ; peut fonctionner.
Après de multiples tentatives infructueuses de faire marcher cette transition, j’ai fini par voir qu’une transition ne pouvait pas s’appliquer à une transformation (cf : http://www.w3.org/TR/css3-transitio...).
Est-ce-que quelqu’un a une idée ?
#11par jkneb, le 16 janvier 2013
Bah sinon suffit d’animer sur max-height et non sur height cf le trick de Léa Verou sur le sujet http://jsfiddle.net/leaverou/zwvNY
#12par Patrice, le 6 septembre 2013
Ce site est une vraie mine d’or, je découvre ici la puissance du CSS3 les exemples sont multiples et vraiment très bien réalisés. Merci de partager cette connaissance.
#13par Xavier, le 13 février 2014
En travaillant avec max-height, ça semble marcher.
.accordeon p height : 0 ; max-height : 0
.accordeon p:hover p height:auto ; max-height : 30em ;