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

Question

Ich versuche, CSS-Übergänge zu verwenden, um

nach unten zu verschieben.




Beginnt bei height: 0;. Beim Schweben wird die Höhe auf height:auto; gesetzt. Dies führt jedoch dazu, dass es nur erscheint, ohne

Wenn ich von height: 40px; zu height: auto; gehe, dann gleitet es nach oben zu height: 0;< /code> und dann plötzlich auf die richtige Höhe springen.

Wie kann ich das sonst tun, ohne JavaScript zu verwenden?




#child0 {
  Höhe: 0;
  Überlauf versteckt;
  Hintergrundfarbe: #dedede;
  -moz-transition: Höhe 1s Leichtigkeit;
  -webkit-transition: Höhe 1s Leichtigkeit;
  -o-Übergang: Höhe 1s Leichtigkeit;
  Übergang: Höhe 1s Leichtigkeit;
}
#parent0:hover #child0 {
  Höhe: automatisch;
}
#child40 {
  Höhe: 40px;
  Überlauf versteckt;
  Hintergrundfarbe: #dedede;
  -moz-transition: Höhe 1s Leichtigkeit;
  -webkit-transition: Höhe 1s Leichtigkeit;
  -o-Übergang: Höhe 1s Leichtigkeit;
  Übergang: Höhe 1s Leichtigkeit;
}
#parent40:hover #child40 {
  Höhe: automatisch;
}
h1 {
  Schriftdicke: fett;
}

Der einzige Unterschied zwischen den beiden CSS-Snippets besteht darin, dass eines die Höhe 0 und das andere die Höhe 40 hat.
<hr>
<div id="parent0">
  <h1>Beweg mich (Höhe: 0)</h1>
  <div id="child0">Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (Höhe: 40)</h1>
  <div id="child40">Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>Einige Inhalte
    <br>
  </div>
</div>

Answer 1

您应该使用scaleY。

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>

我在 jsfiddle 上制作了上述代码的供应商前缀版本，并进行了更改你的jsfiddle使用scaleY而不是高度。

编辑 有些人不喜欢 scaleY 转换内容的方式。如果这是一个问题，那么我建议使用 clip 代替。

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

在过渡中使用max-height，而不是height。并将 max-height 的值设置为比您的盒子更大的值。

请参阅 Chris Jordan 在另一个 JSFiddle 演示 /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>