Bagaimanakah saya boleh menukar height:0;height:auto;

Question

Saya cuba menggunakan peralihan CSS untuk membuat

Bermula pada tinggi: 0;. Semasa tuding, ketinggian ditetapkan kepada height:auto;. Walau bagaimanapun, ini menyebabkan ia hanya muncul, tanpa peralihan




Jika saya beralih daripada tinggi: 40px; kepada tinggi: auto; /code> dan kemudian tiba-tiba melompat ke ketinggian yang betul.

Bagaimana lagi saya boleh melakukan ini tanpa menggunakan JavaScript?




#child0 {
  ketinggian: 0;
  limpahan: tersembunyi;
  warna latar belakang: #dedede;
  -moz-transition: ketinggian 1s mudah;
  -webkit-transition: ketinggian 1s mudah;
  -o-peralihan: ketinggian 1s mudah;
  peralihan: ketinggian 1s mudah;
}
#parent0:hover #child0 {
  ketinggian: auto;
}
#child40 {
  ketinggian: 40px;
  limpahan: tersembunyi;
  warna latar belakang: #dedede;
  -moz-transition: ketinggian 1s mudah;
  -webkit-transition: ketinggian 1s mudah;
  -o-peralihan: ketinggian 1s mudah;
  peralihan: ketinggian 1s mudah;
}
#parent40:hover #child40 {
  ketinggian: auto;
}
h1 {
  font-weight: tebal;
}

Satu-satunya perbezaan antara dua coretan CSS ialah satu mempunyai ketinggian: 0, satu lagi ketinggian: 40.
<hr>
<div id="parent0">
  <h1>Tuding saya (ketinggian: 0)</h1>
  <div id="child0">Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Tuding saya (ketinggian: 40)</h1>
  <div id="child40">Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>Sesetengah kandungan
    <br>
  </div>
</div>

Answer 1

Anda harus menggunakan skalaY.

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

<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Saya membuat versi awalan vendor bagi kod di atas pada jsfiddle dan menukar jsfiddle anda untuk menggunakan skalaY dan bukannya ketinggian.

Edit Sesetengah orang tidak suka scaleY 转换内容的方式。如果这是一个问题，那么我建议使用 clip sebaliknya.

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}

<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>

Answer 2

Gunakan max-height，而不是height。并将 max-height dalam peralihan dan tetapkan nilai kepada nilai yang lebih besar daripada kotak anda.

Lihat jawapan Chris Jordan di sini dalam demo JSFiddle yang lain /stackoverflow.com/a/20226830/18706">

#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;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>