Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

(Astuce) Utiliser les transitions CSS avec height:auto

Créer un effet d’ouverture et de fermeture

Création: novembre 2011Modifié:

Profile

Vincent De Oliveira

@iamvdo

http://iamvdo.me

More Informations...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur orci metus, suscipit non gravida eget.

Vestibulum metus quam, tristique in posuere et

Ut vitae ipsum porta justo feugiat semper. Etiam ac tellus in lectus consectetur vestibulum. Vivamus mollis fringilla sapien, eget ornare est iaculis at. Nullam in nisl in orci ultrices fringilla. Duis iaculis purus ut lorem fermentum adipiscing.

Just another dummy text

Lorem ipsum dolor sit amet consectetuer Suspendisse vel ac ut Sed. Ut sodales consectetuer.

Nullam dolor malesuada tempus vitae laoreet Sed vitae interdum Aliquam Vivamus. Facilisi Morbi eget consequat parturient.

Pharetra sapien nunc quis tempus rutrum nibh Nam augue natoque sit. Elit malesuada interdum neque.

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
Partagez
Facebook Twitter

Votez

43 votes4.55

Simuler un effet d’ouverture de height:0 vers height:auto avec les transitions en CSS.

Dans 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.

Envie d'une nouvelle démo?

Un p'tit mot...

#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 h3 n’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 un height: 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 h3 non fermé, c’est corrigé.
La démo de Raphaël est une bonne astuce, ce sont les li qui 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 ;


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)