☰

CSS を使用して height: 0; を height: auto; に移行するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon css css-transitions
CSS を使用して height: 0; を height: auto; に移行するにはどうすればよいでしょうか? 質問する

<ul>CSS トランジションを使用してスライドダウンを作成しようとしています。

<ul>は から始まります。height: 0;マウスオーバーすると、高さは に設定されます。しかし、これにより、遷移せずにheight:auto;単に表示されるだけになります。

height: 40px;からまで実行するとheight: auto;、 までスライドしheight: 0;、その後突然正しい高さまでジャンプします。

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>

ベストアンサー1

max-height遷移では を使用し、 は使用しないでくださいheight。また、 の値を、max-heightボックスが取得できる値よりも大きい値に設定します。

見るJSFiddle デモクリス・ジョーダンが別の答えここ。

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

おすすめ記事