CSS3转换不适用于显示属性

我一直试图使用CSS来显示一个隐藏的Div淡入淡出，只要我hover其父元素。

到目前为止，我所做的只是让隐藏的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; } 

任何线索什么我做错了？ 只是当我将鼠标hover在button上时，试图获得隐藏内容的平滑效果。 提前致谢！

Answer 1

display:none; 从页面中删除一个块，就像它永远不会在那里一样。 块不能部分显示; 它是在那里，或者不是。 visibility也是如此; 你不能指望一个块被半hidden ，根据定义，这将是visible ！ 幸运的是，您可以使用opacity来淡化效果。
– 参考

作为一种替代性的CSS解决scheme，您可以使用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 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

做了一些改变，但我想我使用visibility得到了你想要的效果。 http://jsfiddle.net/9dsGP/49/

我也做了这些改变：

 position: absolute; /* so it doesn't expand the button background */ top: calc(1em + 8px); /* so it's under the "button" */ left:8px; /* so it's shifted by padding-left */ width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */ 

或者，您可以将.content作为.button的兄弟，但我没有为此做出示例。

Answer 4

我遇到了display:none问题display:none

我有几个带有过渡效果的横条，但我只想显示该容器的一部分，并在保持效果的同时折叠其余部分。 我在这里复制了一个小演示

显而易见的是将这些隐藏的animation条包装在div中，然后切换该元素的高度和不透明度

 .hide{ opacity: 0; height: 0; } .bars-wrapper.expanded > .hide{ opacity: 1; height: auto; } 

animation效果很好，但问题是，这些隐藏的酒吧仍然消耗我的网页上的空间，并重叠其他元素

因此在隐藏的包装器中添加display:none 。隐藏解决了保证金问题，但不是转换，既不应用display:none也不是height:0;opacity:0对子元素有效。

所以我最后的解决方法是给那些隐藏的酒吧一个负面的和绝对的位置，并与CSS转换运作良好。

的jsfiddle

Answer 5

最大高度

 .PrimaryNav-container { ... max-height: 0; overflow: hidden; transition: max-height 0.3s ease; ... } .PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container { max-height: 300px; } 

https://www.codehive.io/boards/bUoLvRg

Answer 6

我最近find一个解决scheme，同时摆弄我感觉像分享。

直接希望看到结果的人：

点击： https ： //jsfiddle.net/dt52jazg/ hover： https ： //jsfiddle.net/7gkufLsh/1/

以下是代码：

HTML

 <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'); }); })(); 

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

Answer 7

当你需要切换一个元素，而且你不需要animationmargin属性。 你可以试试margin-top: -999999em 。 只是不要全部过渡。