CSS3隱藏的div淡入淡出？

Question

我有我的jsfiddle在這裏。

http://jsfiddle.net/xC5wN/

我基本上要當即將懸停在用鼠標隱藏div來滑開。它將成爲導航欄的一部分，並且頁面的描述將在下面放慢。

我使用

-webkit-transition: all 0.5s ease-in-out; 

無濟於事嘗試。這是我的代碼：

.aboutnav { 
    background-color: #a661ca; 
} 
.aboutcontents { 
    display: none; 
} 
.aboutnav:hover .aboutcontents { 
    display: block; 
    background-color: #a661ca; 
} 

Answer 1

LIVE DEMO

.aboutnav { 
    background-color: #a661ca; 
    overflow:hidden; 

    max-height:60px; 
    transition: max-height 1s; 
    -webkit-transition: max-height 1s; 
} 
.aboutnav:hover { 
    max-height:180px; 
    /* Don't exagerate with this one, 
    otherwise the initial animation will not be noticable, 
    just set it to a preferred maximal height. */ 
} 

Answer 2

您不能添加顯示的轉換。您需要考慮通過其他方式隱藏和顯示內容，例如max-height和opacity。您需要將非零值設置爲較大的值，因此您不會意外剪輯您的內容。

Demo

.aboutnav { 
    background-color: #a661ca; 
} 

.aboutcontents { 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    -webkit-transition: all 0.5s ease-in-out; 
} 

.aboutnav:hover .aboutcontents { 
    max-height: 200px; 
    opacity: 1; 
} 

Answer 3

你應該改變的.aboutcontents的邊距，使其滑動。作爲默認.aboutcontents被隱藏在.aboutnav後面，在.aboutnav上徘徊，.aboutcontents滑落。

Here's a demo

/* margin and padding reset */ 
* { 
    margin:0; 
    padding:0; 
} 

h4 { 
    background-color: #a661ca; 
} 

.aboutcontents { 
    background-color: #a661ca; 
    display: block; /* required for setting margin-top */ 
    margin-top: -100px; 
    position: relative; 
    z-index:-1; 
    transition: margin 0.5s ease-in-out; 
} 

.aboutnav:hover .aboutcontents { 
    margin-top: 0px;  
}