CSS3过渡不适用于显示属性

CSS3过渡不适用于显示属性

display:none;

从页面中删除一个块，就好像它从来没有出现过一样。块不能部分显示；它在那儿或不在那里。同样是正确的

visibility

;您不能指望一个块是

hidden

定义的一半

visible

！幸运的是，您可以改用

opacity

淡入淡出效果。 - 参考作为alternatiiveCSS的解决方案，你可以玩

opacity

，

height

而且

padding

性能达到理想的效果：

#header #button:hover > .content {    opacity:1;    height: 150px;    padding: 8px;    }#header #button .content {    opacity:0;    height: 0;    padding: 0 8px;    overflow: hidden;    transition: all .3s ease .15s;}

（由于简洁，省略了供应商前缀。）

#header #button {  width:200px;  background:#ddd;  transition: border-radius .3s ease .15s;}#header #button:hover, #header #button > .content {    border-radius: 0px 0px 7px 7px;}#header #button:hover > .content {  opacity: 1;  height: 150px;  padding: 8px;}#header #button > .content {  opacity:0;  clear: both;  height: 0;  padding: 0 8px;  overflow: hidden;  -webkit-transition: all .3s ease .15s;  -moz-transition: all .3s ease .15s;  -o-transition: all .3s ease .15s;  -ms-transition: all .3s ease .15s;  transition: all .3s ease .15s;  border: 1px solid #ddd;  -webkit-box-shadow: 0px 2px 2px #ddd;  -moz-box-shadow: 0px 2px 2px #ddd;  box-shadow: 0px 2px 2px #ddd;  background: #FFF;}#button > span { display: inline-block; padding: .5em 1em }<div id="header">  <div id="button"> <span>This is a Button</span>    <div >      This is the Hidden Div    </div>  </div></div>