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

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

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

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

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

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


当前回答

使用CSS动画淡入:

.item {
     display: none;
}

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

其他回答

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

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

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

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

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

您需要通过其他方式隐藏该元素才能使其工作。

我通过绝对定位<div>s并将隐藏的<div>设置为不透明度:0来实现这一效果。

如果您甚至将显示属性从“无”切换为“块”,则不会在其他元素上进行转换。

要解决此问题,请始终允许元素显示为:块,但通过调整以下任何方式隐藏元素:

将高度设置为0。将不透明度设置为0。将元素放置在另一个溢出的元素的框架之外:隐藏。

可能有更多的解决方案,但如果将元素切换为显示:无,则无法执行转换。例如,您可以尝试以下操作:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

但这行不通。根据我的经验,我发现这毫无用处。

因此,您将始终需要保持元素display:block,但您可以通过执行以下操作来绕过它:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

此解决方案具有极好的兼容性,我还没有见过它:

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

说明:它使用了可见性:隐藏技巧(与“显示和动画”在一个步骤中兼容),但它使用了组合位置:绝对;z指数:-1;指针事件:无;以确保隐藏的容器不占用空间并且不响应用户交互。

简单如下:)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

使其褪色,然后使其高度为0;。还要确保使用forward,使其保持在最终状态。