Html CSS3 过渡不适用于 display 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22103006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition doesn't work with display property
提问by JCBiggar
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
每当我悬停其父元素时，我一直在尝试使用 css 来显示隐藏的 Div 淡入。
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
到目前为止，我所做的只是让隐藏的 div 显示出来，但没有任何缓动过渡。
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
这是我在 JSfiddle http://jsfiddle.net/9dsGP/ 上的代码
Here is my Code:
这是我的代码：
HTML:
HTML：
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
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;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
关于我做错了什么的任何线索？当我将鼠标悬停在按钮上时，只是试图为隐藏的内容获得平滑的效果。提前致谢！
回答by Hashem Qolami
display:none;removes a block from the page as if it were never there. A block cannot be partially displayed; it's either there or it's not. The same is true forvisibility; you can't expect a block to be halfhiddenwhich, by definition, would bevisible! Fortunately, you can useopacityfor fading effects instead.
- reference
display:none;从页面中删除一个块，就好像它从不存在一样。一个块不能部分显示；它要么在那里，要么不在。这同样适用于visibility; 你不能指望一个块是一半hidden，根据定义，它是visible！幸运的是，您可以使用opacity淡入淡出效果代替。
-参考
As an alternatiive CSS solution, you could play with opacity, heightand paddingproperties to achieve the desirable effect:
作为替代的 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;
}
(Vendor prefixes omitted due to brevity.)
（为简洁起见，省略了供应商前缀。）
Here is a working demo. Also here is a similar topicon 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>回答by Boomstein
You cannot use height: 0and height: autoto transition the height. autois always relative and cannot be transitioned towards. You could however use max-height: 0and transition that to max-height: 9999pxfor example.
您不能使用height: 0和height: auto来转换高度。auto总是相对的，不能过渡到。但是max-height: 0，您可以使用并将其转换max-height: 9999px为例如。
Sorry I couldn't comment, my rep isn't high enough...
抱歉，我无法发表评论，我的代表不够高...
回答by rash.tay
I found a solution while tinkering around.
我在修补时找到了解决方案。
People who directly wanna see the results:
直接想看结果的人：
With click:https://jsfiddle.net/dt52jazg/
点击：https : //jsfiddle.net/dt52jazg/
With Hover:https://jsfiddle.net/7gkufLsh/1/
悬停：https : //jsfiddle.net/7gkufLsh/1/
Below is the code:
下面是代码：
HTML
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
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
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
请让我知道此解决方案是否有任何问题，因为我觉得此解决方案不会限制最大高度。
回答by Jayen
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
做了一些改变，但我想我得到了你想要的效果visibility。 http://jsfiddle.net/9dsGP/49/
I also made these changes:
我也做了这些改变：
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 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
或者，您可以将 .content 作为 .button 的兄弟，但我没有为此举例。
回答by Raja Khoury
I faced the problem with display:none
我遇到了问题 display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
我有几个带有过渡效果的水平条，但我只想显示该容器的一部分，并在保持效果的同时折叠其余部分。我在这里复制了一个小演示
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
显而易见的是将那些隐藏的动画条包裹在一个 div 中，然后切换该元素的高度和不透明度
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
动画效果很好，但问题是这些隐藏的栏仍然占用我页面上的空间并与其他元素重叠
so adding display:noneto the hidden wrapper .hidesolves the margin issue but not the transition, neither applying display:noneor height:0;opacity:0works on the children elements.
所以添加display:none到隐藏的包装器.hide可以解决边距问题，但不能解决过渡问题，既不应用display:none也不height:0;opacity:0适用于子元素。
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
所以我最后的解决方法是给那些隐藏的条一个负的和绝对的位置，它与 CSS 过渡配合得很好。
回答by Fatih Hayrio?lu
max-height
最大高度
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
回答by Onno van der Zee
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
当您需要切换一个元素，并且不需要为 margin 属性设置动画时。你可以试试margin-top: -999999em。只是不要全部过渡。
