CSS3过渡不适用于display属性

Question

每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.

到目前为止,我所要做的就是让隐藏的div显示,但是没有缓和的过渡.

这是我在JSfiddle上的代码http://jsfiddle.net/9dsGP/

这是我的代码:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS:

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

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

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}

关于我做错了什么的任何线索？当我将鼠标悬停在按钮上时,只是试图为隐藏内容获得平滑效果.提前致谢!

Answer 1

display:none;从页面中删除一个块,就好像它从未出现过一样.无法部分显示块; 它要么存在,要么不存在.同样如此visibility; hidden根据定义,你不能指望一个块是一半 visible!幸运的是,您可以使用opacity淡化效果代替.
- 参考

作为alternatiive CSS的解决方案,你可以玩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;
}

(由于简洁,省略了供应商前缀.)

这是一个工作演示.这里也是一个关于SO 的类似主题.

#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 class="content">
      This is the Hidden Div
    </div>
  </div>
</div>

Answer 2

您无法使用height: 0和height: auto转换高度.auto总是相对的,不能过渡到.但是max-height: 0,您可以使用并转换max-height: 9999px为例如.

对不起,我无法评论,我的代表不够高......

Answer 3

我在修补的过程中找到了解决方案。

直接想看到结果的人：

点击： https: //jsfiddle.net/dt52jazg/

悬停： https: //jsfiddle.net/7gkufLsh/1/

下面是代码：

超文本标记语言

<ul class="list">
  <li>Hey</li>
  <li>This</li>
  <li>is</li>
  <li>just</li>
  <li>a</li>
  <li>test</li>
</ul>

<button class="click-me">
  Click me
</button>

CSS

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.active li {
  min-height: 20px;
  opacity: 1;
}

JS

(function() {
  $('.click-me').on('click', function() {
    $('.list').toggleClass('active');
  });
})();

请让我知道这个解决方案是否有任何问题，因为我觉得这个解决方案不会限制最大高度。