css - CSS3下拉菜单可以淡入淡出吗？

Question

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

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

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

Answer 1

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

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

}

Answer 3

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

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

Answer 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

Answer 5

我在 Codepen 上创建了一个演示，它适用于 Firefox 或其他：

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

希望这可以帮助。

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