我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
这个问题的最简单的通用解决方案是：在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或更早版本中工作。
其他回答
在这种情况下不使用关键帧应用过渡的另一种方法是将元素的宽度设置为零，然后在悬停时取消设置
.className{
visibility:hidden;
opacity: 0;
transition: .2s;
width:0;
}
.className:hover{
visibility:visible;
margin-right: .5rem;
opacity: 1;
width:unset;
}
我找到了更好的方法来解决这个问题，你可以使用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)
}
}
我启动了一个名为[Tggle Display Animate][1]的开源骨架项目。
这个骨架助手将允许您轻松模拟jQuery显示/隐藏，但使用输入/输出CSS3转换动画。
它使用类切换，因此您可以在元素上使用除display之外的任何CSS方法：none|block|table|inline等，以及可以想到的其他替代用法。
它的主要设计目的是用于元素切换状态，并且它支持还原状态，其中隐藏对象允许您反向运行关键帧或播放隐藏元素的替代动画。
我正在研究的概念的大部分标记都是CSS，实际使用的JavaScript很少。
您也可以使用此选项：
.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}
我怀疑，如果显示发生变化，转换被禁用的原因是因为显示实际的功能。它不会改变任何可以想象的流畅动画。
显示：无；可见性：隐藏；是两件完全不同的事情。两者都具有使元素不可见的效果，但具有可见性：隐藏；它仍然呈现在布局中，但只是不明显。隐藏元素仍然占用空间，并且仍然以内联或块、块内联或表的形式呈现，或者以显示元素告诉的方式呈现，并相应地占用空间。其他元素不会自动移动以占用该空间。隐藏元素只是不将其实际像素渲染到输出。
display：另一方面，没有一个实际上阻止元素完全渲染。它不占用任何布局空间。其他原本占据该元素占用的部分或全部空间的元素现在调整为占据该空间，就好像该元素根本不存在一样。
显示不仅仅是另一种视觉属性。它建立了元素的整个呈现模式，例如它是块、内联、内联块、表、表行、表单元格、列表项还是其他任何元素！每一个都有非常不同的布局影响，并且没有合理的方法来动画化或平滑地转换它们（例如，尝试想象从块到内联的平滑转换，反之亦然！）。
这就是为什么如果显示更改（即使更改为none或从none更改为none-none不仅仅是不可见的，它本身的元素渲染模式意味着根本没有渲染！），则会禁用转换。
