CSS CSS3下拉菜单可以淡入淡出吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10285375/
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
Can CSS3 drop-down menu fade-in and fade-out?
提问by inorganik
I've implemented a drop-down menu with CSS3 that fades in the drop-down nicely when the parent liis hovered. But the drop-down will not fade-out and here's why. Since you can't transition the display property, the fade is accomplished by transitioning the opacity. Since just the opacity is transitioned, you need to move the sub ulout of the way - otherwise the invisible sub-menu will appear when hovered.
我已经使用 CSS3 实现了一个下拉菜单，当父级li悬停时，它会很好地淡入下拉菜单。但下拉不会淡出，这就是原因。由于您无法转换 display 属性，因此通过转换不透明度来实现淡入淡出。由于只是不透明度被转换，您需要将子移开ul- 否则在悬停时会出现不可见的子菜单。
I've created a JS Fiddle that demonstrates this- without the left:1000px;rule on ul#mainNav li ul, it will fade-out just fine. But then you can hover the invisible menu. - http://jsfiddle.net/YZvdm/
我创建了一个 JS Fiddle 来演示这一点 -如果没有left:1000px;规则ul#mainNav li ul，它会淡出就好了。但是，您可以将鼠标悬停在不可见菜单上。- http://jsfiddle.net/YZvdm/
So how would I go about making it fade-out without making it not accidentally hoverable? height:0;will also eliminate the fade-out, so that's not an option.
那么我将如何让它淡出而不使其不会意外悬停？height:0;也将消除淡出，所以这不是一个选择。
回答by Khan
The key to making this work is using visibility:hiddeninstead of display:noneand using a transition-delayon the visibility until after opacitygoes to 0.
完成这项工作的关键是在可见性上使用visibility:hidden代替display:none和使用 atransition-delay直到之后opacity变为 0。
.nav li ul {
visibility: hidden;
opacity: 0;
-prefixes-transition-property: opacity, visibility;
-prefixes-transition-duration: .4s, 0s;
-prefixes-transition-delay: 0s, .4s;
}
.nav li:hover ul {
visibility: visible;
opacity: 1;
-prefixes-transition-delay: 0s, 0s;
}
Fiddle: http://jsfiddle.net/YZvdm/29/
回答by jamesplease
Here's a Github to an all-CSS dropdown with fade-in and fade-out. It should be able to do everything you can do with Javascript.
这是一个带有淡入和淡出的全 CSS 下拉列表的 Github。它应该能够做你可以用 Javascript 做的一切。
回答by inorganik
Turns out is was a far-better solution for me to simply implement a jQuery fade-in and out, like so:
事实证明，对我来说，这是一个更好的解决方案，只需实现 jQuery 淡入淡出，如下所示：
$(function() {
$('#topNav ul').find('ul').show().hide();
$('#topNav > ul > li').hover(function() {
$(this).children('ul').stop().fadeIn(300);
}, function() {
$(this).children('ul').stop().fadeOut('fast');
});
}
回答by Jerry
I haven't actually tested this, but you should be able to get around it by defining your own special 'delayed' animation, and applying it to the sub-menus.
我还没有实际测试过这个，但是您应该能够通过定义自己的特殊“延迟”动画并将其应用于子菜单来解决它。
#mainNav > li > ul {
-moz-animation-duration: 3s;
-moz-animation-name: delaySlide;
}
@-moz-keyframes delaySlide {
from {
height: auto;
}
95% {
height: auto;
}
to {
height: 0;
}
}
Doing so, and timing it properly, should make your menu's height animation happen afterthe fadeout.
这样做并正确计时，应该可以使菜单的高度动画在淡出之后发生。
Sample code taken off https://developer.mozilla.org/en/CSS/CSS_animations#Defining_the_animation_sequence_using_keyframes
示例代码从https://developer.mozilla.org/en/CSS/CSS_animations#Defining_the_animation_sequence_using_keyframes
回答by hayatbiralem
I have created a demo on Codepen and that is work on Firefox or others:
我在 Codepen 上创建了一个演示，它适用于 Firefox 或其他：
http://codepen.io/hayatbiralem/pen/Gdfie
http://codepen.io/hayatbiralem/pen/Gdfie
Hope this helps.
希望这可以帮助。
回答by Moby's Stunt Double
I'm late to this party, but here is what I ended up with faced with a similar prospect:
我参加这个聚会迟到了，但这是我最终面临类似前景的情况：
Fiddle: https://jsbin.com/bibokaqumi/1/edit?html,css,output
小提琴：https://jsbin.com/bibokaqumi/1/edit ?html,css,output
Markup:
标记：
<nav>
<ul>
<li>Link One</li>
<li class="sub">Link Two
<ul>
<li>Sub-Link One</li>
<li>Sub-Link Two</li>
</ul>
</li>
<li>Link Three</li>
</ul>
</nav>
CSS3:
CSS3：
nav li {
list-style: none;
}
nav > ul > li {
height: 100px;
padding-right: 50px;
float: left;
}
nav > ul > li.sub {
position: relative;
}
nav > ul > li.sub ul {
position: absolute;
top: 20px;
width: 200px;
visibility: hidden;
}
nav > ul > li.sub ul {
opacity: 0;
transition-property: opacity;
transition-duration: 0.3s;
}
nav > ul > li.sub:hover ul {
opacity: 1;
transition-delay: 0.1s;
visibility: visible;
}
