我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
我们可以使用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毫秒）恢复初始值（相当于显示：动画回调中无）。
注意，这种方法比使用可见性的方法要好。在这种情况下，元素仍然占据页面上的空间，并且并不总是合适的。
有关更多示例，请参阅本文。
其他回答
将溢出：隐藏更改为溢出：可见。它工作得更好。我这样使用：
#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;
}
可见更好，因为溢出：隐藏的行为与显示：无完全相同。
从这些答案和其他地方的一些建议中，以下内容非常适合悬停菜单（我在Bootstrap 3中使用了这一点）：
nav .dropdown-menu {
display: block;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 500ms, opacity 300ms;
-webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
max-height: 500px;
opacity: 1;
transition: max-height 0, opacity 300ms;
-webkit-transition: max-height 0, opacity 300ms;
}
如果同时指定两个值，也可以使用height代替max height，因为height:auto不允许用于过渡。最大高度的悬停值需要大于菜单的高度。
简单如下：）
@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，使其保持在最终状态。
您可以简单地使用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;
}
您可以连接两个或更多的转换，而可见性是这次方便的地方。
第二部分{边框：1px实心#eee；}div>ul{可见性：隐藏；不透明度：0；过渡：可见性0s，不透明度0.5s线性；}div：悬停>ul{可见性：可见；不透明度：1；}＜div＞＜ul＞<li>项目1</li><li>项目2</li><li>项目3</li></ul></div>
（不要忘记转换属性的供应商前缀。）
更多详情请参阅本文。
