我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单,但包含不同类型的内容。

目前,CSS 3转换似乎不适用于“display”属性,也就是说,您不能进行从display:none到display:block(或任何组合)的任何转换。

当有人悬停在一个顶级菜单项上时,上面示例中的第二层菜单是否有办法“淡入”?

我知道你可以在visibility:属性上使用转换,但我想不出一种有效的方法。

我也尝试过使用高度,但那只是失败得很惨。

我也意识到,使用JavaScript实现这一点很简单,但我想挑战一下自己,只使用CSS,我觉得我做得有点短。


当前回答

将溢出:隐藏更改为溢出:可见。它工作得更好。我这样使用:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

可见更好,因为溢出:隐藏的行为与显示:无完全相同。

其他回答

您可以连接两个或更多的转换,而可见性是这次方便的地方。

第二部分{边框:1px实心#eee;}div>ul{可见性:隐藏;不透明度:0;过渡:可见性0s,不透明度0.5s线性;}div:悬停>ul{可见性:可见;不透明度:1;}<div><ul><li>项目1</li><li>项目2</li><li>项目3</li></ul></div>

(不要忘记转换属性的供应商前缀。)

更多详情请参阅本文。

我找到了更好的方法来解决这个问题,你可以使用CSS动画,并为显示项目创造出很棒的效果。

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

我们可以使用transition delay属性来代替CSS中不存在的回调。

#selector {
    overflow: hidden;  /* Hide the element content, while height = 0 */
    height: 0;
    opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

那么,这里发生了什么?

当添加了可见类时,高度和不透明度都会立即开始动画(0毫秒),尽管高度需要0毫秒才能完成动画(相当于display:block),不透明度需要600毫秒。移除可见类后,不透明度开始动画(0毫秒延迟,400毫秒持续时间),高度等待400毫秒,然后立即(0毫秒)恢复初始值(相当于显示:动画回调中无)。

注意,这种方法比使用可见性的方法要好。在这种情况下,元素仍然占据页面上的空间,并且并不总是合适的。

有关更多示例,请参阅本文。

不使用显示,您可以将元素存储在“屏幕外”,直到您需要它,然后将其位置设置为您想要的位置,同时对其进行转换。然而,这带来了一系列其他设计问题,因此您的里程可能会有所不同。

无论如何,您可能不想使用显示,因为您希望屏幕阅读器可以访问内容,而屏幕阅读器在很大程度上试图遵守可见性规则-即,如果它不应该被眼睛看到,它就不会作为内容显示给代理。

这个问题的最简单的通用解决方案是:在CSS中随意指定display:none,但是您必须使用JavaScript将其更改为block(或其他任何内容),然后您还必须向有问题的元素添加一个类,该类实际上使用setTimeout()进行转换。这就是全部。

即。:

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

这在最新的sane浏览器中进行了测试。显然,它不应该在Internet Explorer 9或更早版本中工作。