Hvordan kan jeg ændre height: 0; til height: auto; ved hjælp af CSS?

Jeg forsøger at få en <ul> til at glide nedad ved hjælp af CSS-overgange.

Den <ul> starter ved height: 0;. Ved hover sættes højden til height:auto;. Dette medfører imidlertid, at den blot vises, ikke overgang,

Hvis jeg gør det fra height: 40px; til height: auto;, så glider den op til height: 0;, og så hopper den pludselig til den korrekte højde.

Hvordan kan jeg ellers gøre dette uden at bruge 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>
VXp
Redigeret spørgsmål 2017ør december 2017 в 10:38
Programmering
css3 css css-transitions
2010ør august 2010 в 2:50
59 visninger

Du kan i øjeblikket ikke animere på højde, når en af de involverede højder er auto, du skal indstille to eksplicitte højder.

animuson
Redigeret svar 2015ør februar 2015 в 3:53
Kommentarer (7)

Det kan du med en lille smule ikke-semantisk pjat. Min sædvanlige fremgangsmåde er at animere højden af en ydre DIV, som har et enkelt barn, som er en stilløs DIV, der kun bruges til at måle højden på indholdet.

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 vil gerne bare kunne undvære .measuringWrapper og bare sætte DIV's højde til auto og få det animeret, men det ser ikke ud til at virke (højden bliver sat, men der sker ingen 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>

Min fortolkning er, at en eksplicit højde er nødvendig for at animationen kan køre. Du kan ikke få en animation på højden, når en af højderne (start- eller sluthøjden) er auto.

Spencer O'Reilly
Redigeret svar 2017ør december 2017 в 6:38
Kommentarer (8)

Du kan gå fra height:0 til height:auto, forudsat at du også angiver min-height og max-height.

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}
Joran Den Houting
Redigeret svar 2013ør oktober 2013 в 10:03
Kommentarer (7)