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

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

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

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

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

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


当前回答

您可以简单地使用CSS可见性:hidden/visible而不是display:none/block

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

其他回答

我们可以使用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毫秒)恢复初始值(相当于显示:动画回调中无)。

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

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

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

我通过绝对定位<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;
}

我已经多次遇到这个问题,现在只是简单地说:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

通过添加类块(不可见),整个元素将不可单击,但它后面的所有元素都将是因为指针事件:所有主要浏览器都不支持(没有IE<11)。

显示不是转换工作的财产之一。

有关可以应用转换的CSS财产的列表,请参阅动画CSS财产。请参阅CSS值和单位模块第4级,组合值:插值、相加和累加,了解如何插值。

9.1中列出了CSS 3。来自CSS的财产(只需关闭警告弹出窗口)

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

上次我不得不这样做时,我使用了max height,这是一个可设置动画的属性(虽然它有点黑客,但确实有效),但要注意,对于复杂的页面或使用低端移动设备的用户来说,它可能非常刺耳。

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

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