css3 menu d'accordéon de transition

Question

J'ai créé un menu d'accordéon qui remplace le contrôle de sélection de formulaire, et je souhaite utiliser les transitions css3 pour qu'il se dilate/se contracte facilement.
Voici un lien vers la jsFiddle: http://jsfiddle.net/hKsCD/4/

Pour obtenir l'effet désiré que je dois animer la hauteur de chacun des liens, mais je ne suis pas sûr de savoir comment faire. Les transitions CSS3 sont déroutantes. O_o

Answer 1

.accordion { 
    height: 20px; /*define height to start from*/ 
    transition: height 2s; 
    -moz-transition: height 2s; /* Firefox 4 */ 
    -webkit-transition: height 2s; /* Safari and Chrome */ 
    -o-transition: height 2s; /* Opera */ 
} 
.accordion.expanded { 
    height: 400px;/*desired height when expanded*/ 
} 

vous devez être prudent mais quand la hauteur varie d'un élément à l'autre, vous devez utiliser une solution de contournement maximum de largeur dans ces cas comme « height: auto » ne fonctionnera pas.

par exemple. remplacez height dans l'exemple ci-dessus par max-height et dans l'état étendu max-height à quelque chose que l'élément n'atteindra jamais (pas trop élevé cependant, car la vitesse d'animation est calculée par rapport à la hauteur à animer -> une largeur maximale qui est trop high (par exemple 9999px) donne une animation si rapide que vous ne la remarquez pas)