CSS3下拉菜单可以淡入和淡出吗? [英] Can CSS3 drop-down menu fade-in and fade-out?

问题描述

我已经用CSS3实现了一个下拉菜单，当父 li 悬停时，该菜单会在下拉菜单中很好地淡化.但是下拉菜单不会消失，这就是原因.由于您无法转换显示属性，因此淡入淡出是通过转换不透明度来完成的.由于只改变了不透明度，因此您需要将 ul 子目录移开-否则，将鼠标悬停时将显示不可见的子菜单.

I've implemented a drop-down menu with CSS3 that fades in the drop-down nicely when the parent li is 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 ul out of the way - otherwise the invisible sub-menu will appear when hovered.

我创建了一个JS小提琴来演示这一点-在 ul#mainNav li ul 上没有 left:1000px; 规则，它将淡出.但是，您可以将鼠标悬停在不可见的菜单上.- http://jsfiddle.net/YZvdm/

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/

那么我将如何使它淡出而不使它不会意外地悬停呢? height:0; 还将消除淡入淡出，因此这不是一个选择.

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.

推荐答案

完成这项工作的关键是使用 visibility:hidden 而不是 display:none 并使用可见性上的 transition-delay ，直到 opacity 变为0之后.

The key to making this work is using visibility:hidden instead of display:none and using a transition-delay on the visibility until after opacity goes to 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;
}

提琴: http://jsfiddle.net/YZvdm/29/

这篇关于CSS3下拉菜单可以淡入和淡出吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！