CSS3下拉菜单可以淡入淡出吗？答案

【问题标题】：Can CSS3 drop-down menu fade-in and fade-out?CSS3下拉菜单可以淡入淡出吗？
【发布时间】：2012-04-23 17:34:49
【问题描述】：

我使用 CSS3 实现了一个下拉菜单，当父 li 悬停时，它会很好地淡入下拉菜单。但是下拉菜单不会淡出，这就是原因。由于您无法转换显示属性，因此淡入淡出是通过转换不透明度来完成的。由于只是转换了不透明度，因此您需要将子 ul 移开 - 否则悬停时会出现不可见的子菜单。

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

那么我该如何让它淡出而不让它不小心悬停呢？ height:0; 也会消除淡出，所以这不是一个选项。

【问题讨论】：

标签： css

【解决方案1】：

完成这项工作的关键是使用visibility:hidden 而不是display:none，并在可见性上使用transition-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;
}

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

【讨论】：

这肯定是一个很好的解决方案，但唯一的问题是在页面加载的那一刻，用户会看到下拉菜单淡出 0.4 秒。

【解决方案2】：

事实证明，对于我来说，这是一个更好的解决方案，可以简单地实现 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');
    });

}

【讨论】：

说实话，是的，这就是我会做的。尽管使用 CSS 过渡很流行，但它们编写起来很复杂并且浏览器支持有限，而 jQuery 脚本易于编写、易于理解并且可以在任何地方使用。

【解决方案3】：

这是一个带有淡入和淡出的全 CSS 下拉菜单的 Github。它应该可以做所有你可以用 Javascript 做的事情。

http://github.com/jmeas/CSS3-Dropdown-With-Fade

【讨论】：

【解决方案4】：

我还没有实际测试过这一点，但您应该能够通过定义自己的特殊“延迟”动画并将其应用于子菜单来解决它。

#mainNav > li > ul {  
    -moz-animation-duration: 3s;  
    -moz-animation-name: delaySlide;     
}  

@-moz-keyframes delaySlide {  
    from {  
      height: auto;  
    }  

    95% {  
       height: auto;
    }  
    to {  
      height: 0;  
    }     
}

这样做并正确计时，应该会使菜单的高度动画在淡出之后发生。

示例代码摘下https://developer.mozilla.org/en/CSS/CSS_animations#Defining_the_animation_sequence_using_keyframes

【讨论】：

你使用的是 webkit 还是壁虎？
是的，您必须将其更改为 -webkit- 用于 chrome 等。
@Jerry - 或者更好的是，同时使用这两种浏览器（加上无前缀版本）同时支持两种浏览器。

【解决方案5】：

我在 Codepen 上创建了一个演示，可以在 Firefox 或其他平台上运行：

http://codepen.io/hayatbiralem/pen/Gdfie

希望这会有所帮助。

【讨论】：

菜单不错。需要注意的是，您仍在使用 javascript，但它很好地集成了 CSS 动画。

【解决方案6】：

我参加这个聚会迟到了，但我最终遇到了类似的前景：

小提琴： https://jsbin.com/bibokaqumi/1/edit?html,css,output

标记：

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

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

【讨论】：