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