Nasıl geçiş yüksekliği: 0; height: auto; CSS kullanarak?

SORU

18 AĞUSTOS 2010, ÇARŞAMBA

Nasıl geçiş yüksekliği: 0; height: auto; CSS kullanarak?

CSS geçişler kullanarak aşağı <ul> bir slayt yapmaya çalışıyorum.

<ul> height: 0; kapalı başlar. Üzerine gelindiğinde, yüksekliği 11* *olarak ayarlanmıştır. Ancak, bu sadece görünen sebep oldudeğilgeçiş,

height: auto; height: 40px; den sonra yaparsam height: 0;, slayt ve aniden yüksekliği doğru atlayın.

- Bunu başka nasıl yapabilirim?

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

CEVAP

30 Kasım 2011, ÇARŞAMBA

Dönüşümü max-height 18 ** değil. Ve kutusu hiç olacak daha bir şey için max-height değeri daha büyük olarak ayarlayın.

JSFiddle demo answer başka bir Chris Jordan tarafından sağlanan görüyor.

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

Bunu Paylaş: