Wie kann ich height: 0; mit CSS in height: auto; umwandeln?

Ich versuche, ein <ul> mit CSS-Übergängen nach unten gleiten zu lassen.

Die <ul> beginnt bei height: 0;. Beim Hovern wird die Höhe auf height:auto; gesetzt. Dies führt jedoch dazu, dass sie einfach angezeigt wird und nicht übergeht,

Wenn ich es von height: 40px; auf height: auto;, dann wird es gleiten bis zu height: 0;, und dann plötzlich auf die richtige Höhe springen.

Wie könnte ich das sonst machen, ohne JavaScript zu verwenden?

#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>
VXp
Bearbeitete Frage 28. Dezember 2017 в 10:38
Programmierung
css3 css css-transitions
18. August 2010 в 2:50
13 Aufrufe

Sie können derzeit nicht auf der Höhe animieren, wenn eine der beteiligten Höhen auto ist, Sie müssen zwei explizite Höhen festlegen.

animuson
Bearbeitete Antwort 25. Februar 2015 в 3:53
Kommentare (7)

Sie können, mit ein wenig nicht-semantische jiggery-Pokery. Mein üblicher Ansatz ist es, die Höhe eines äußeren DIV zu animieren, die ein einzelnes Kind hat, das ein stilloses DIV ist, das nur zur Messung der Inhaltshöhe verwendet wird.

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

Man würde gerne auf den .measuringWrapper verzichten können und einfach die Höhe des DIVs auf auto setzen und das animieren lassen, aber das scheint nicht zu funktionieren (die Höhe wird gesetzt, aber es erfolgt keine Animation).

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

Meine Interpretation ist, dass eine explizite Höhe erforderlich ist, damit die Animation läuft. Man kann keine Animation über die Höhe erhalten, wenn eine der beiden Höhen (die Start- oder Endhöhe) auto ist.

Spencer O'Reilly
Bearbeitete Antwort 11. Dezember 2017 в 6:38
Kommentare (8)

Sie können von height:0 zu height:auto übergehen, vorausgesetzt, Sie geben auch min-height und max-height an.

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}
Joran Den Houting
Bearbeitete Antwort 31. Oktober 2013 в 10:03
Kommentare (7)