Comment faire passer height : 0 ; à height : auto ; à l'aide de CSS ?

Question

J'essaie de faire un <ul> glisser vers le bas en utilisant des transitions CSS.

El <ul> commence à height: 0; . Au survol, la hauteur est fixée à height:auto; . Cependant, cela provoque une simple apparition, no transition,

Si je le fais à partir de height: 40px; a height: auto; puis il glissera jusqu'à height: 0; puis sauter soudainement à la bonne hauteur.

Comment pourrais-je faire autrement sans utiliser JavaScript ?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

Answer 1

Utilice max-height dans la transformation et non height . Et fixez la valeur de la hauteur maximale à quelque chose de plus grand que ce que votre boîte pourra jamais avoir.

Ver Démonstration de JSFiddle fourni par Chris Jordan dans un autre responder ici.

Answer 2

Vous devez utiliser scaleY à la place.

HTML :

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS :

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

J'ai fait une version préfixée par le vendeur du code ci-dessus sur jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ et modifié votre jsfiddle pour utiliser scaleY au lieu de height, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/ .

Answer 3

Vous ne pouvez pas actuellement animer sur la hauteur lorsque l'une des hauteurs impliquées est auto vous devez définir deux hauteurs explicites. Il existe une solution de contournement complète publiée en réponse à la question suivante cette question similaire .

Answer 4

Une solution de contournement visuelle à l'animation de la hauteur à l'aide de transitions CSS3 consiste à animer le remplissage à la place.

Vous n'obtenez pas tout à fait l'effet d'effacement complet, mais en jouant sur les valeurs de durée de transition et de remplissage, vous devriez vous en rapprocher. Si vous ne souhaitez pas définir explicitement la hauteur/la hauteur maximale, cela devrait correspondre à ce que vous recherchez.

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (riffé sur le jsFiddle de stephband ci-dessus)

Answer 5

Je voulais juste mettre un lien vers un bidule qui démontre la solution/réponse approuvée de Jeff :

http://jsfiddle.net/thechrisjordan/3Fc7D/23/

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}