我目前正在设计一个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;
}
其他回答
我已经多次遇到这个问题，现在只是简单地说：
.block {
opacity: 1;
transition: opacity 250ms ease;
}
.block--invisible {
pointer-events: none;
opacity: 0;
}
通过添加类块（不可见），整个元素将不可单击，但它后面的所有元素都将是因为指针事件：所有主要浏览器都不支持（没有IE＜11）。
如果您使用jQuery设置类，这将100%有效：
$（文档）.ready（函数）{$（'按钮'）.click（函数）{var container=$（'.container'）；if（！container.hasClass（'active'））{container.addClass（“显示”）.outerWidth（）；container.addClass（'active'）；}其他{container.removeClass（'active'）.one（'transitioned'，function（）{container.removeClass（“显示”）；});}});});.容器{显示：无；不透明度：0；过渡：不透明度0.3s缓解；}.container.show{显示：柔性；}.容器激活{不透明度：1；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button type=“button”>切换</button><div class=“container”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕。</div>
当然，您可以只使用jQuery.fadeIn（）和.fadeOut（）函数，但设置类的好处是，如果您想转换为块以外的显示值（默认情况下使用.fadeIn）和.fadaOut（））。
在这里，我正在过渡到具有良好渐变效果的显示弹性。
使用CSS动画淡入：
.item {
display: none;
}
.item:hover {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
我怀疑任何刚开始CSS转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。
然后添加另一个CSS类，例如“on”，将不透明度设置为1，并定义不透明度的转换。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。
P.S.如果您发现自己需要同时执行display:block和添加class“on”，请使用setTimeout延迟后者。否则，浏览器只会同时看到这两种情况，并禁用转换。
编辑：在本示例中未应用display none。
@keyframes hide {
0% {
display: block;
opacity: 1;
}
99% {
display: block;
}
100% {
display: none;
opacity: 0;
}
}
上面发生的是，99%的动画显示设置为阻止，而不透明度逐渐消失。在最后一刻，display属性设置为none。
最重要的一点是使用动画填充模式在动画结束后保留最后一帧：向前
.hide {
animation: hide 1s linear;
animation-fill-mode: forwards;
}
以下是两个示例：https://jsfiddle.net/qwnz9tqg/3/
