我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
您可以连接两个或更多的转换，而可见性是这次方便的地方。
第二部分{边框：1px实心#eee；}div>ul{可见性：隐藏；不透明度：0；过渡：可见性0s，不透明度0.5s线性；}div：悬停>ul{可见性：可见；不透明度：1；}＜div＞＜ul＞<li>项目1</li><li>项目2</li><li>项目3</li></ul></div>
（不要忘记转换属性的供应商前缀。）
更多详情请参阅本文。
其他回答
如果您使用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（））。
在这里，我正在过渡到具有良好渐变效果的显示弹性。
简单如下：）
@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，使其保持在最终状态。
我启动了一个名为[Tggle Display Animate][1]的开源骨架项目。
这个骨架助手将允许您轻松模拟jQuery显示/隐藏，但使用输入/输出CSS3转换动画。
它使用类切换，因此您可以在元素上使用除display之外的任何CSS方法：none|block|table|inline等，以及可以想到的其他替代用法。
它的主要设计目的是用于元素切换状态，并且它支持还原状态，其中隐藏对象允许您反向运行关键帧或播放隐藏元素的替代动画。
我正在研究的概念的大部分标记都是CSS，实际使用的JavaScript很少。
我感谢所有的回答。以下是我用于类似目的的内容：过渡与动画。
例子：https://jsfiddle.net/grinevri/tcod87Le/22/
<div class="animation"></div>
<div class="transition"></div>
@keyframes animationTo {
0% { background-color: rgba(0, 0, 0, 0.1); }
100% { background-color: rgba(0, 0, 0, 0.5); }
}
@keyframes animationFrom {
0% { background-color: rgba(0, 0, 0, 0.5); }
100% { background-color: rgba(0, 0, 0, 0.1); }
}
.animation,
.transition{
margin: 5px;
height: 100px;
width: 100px;
background-color: rgba(0, 0, 0, 0.1);
}
.animation{
animation: animationFrom 250ms;
}
.animation:hover{
background-color: rgba(0, 0, 0, 0.5);
animation: animationTo 250ms;
}
.transition{
transition: background-color 250ms;
}
.transition:hover{
background-color: rgba(0, 0, 0, 0.5);
}
我怀疑任何刚开始CSS转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。
然后添加另一个CSS类，例如“on”，将不透明度设置为1，并定义不透明度的转换。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。
P.S.如果您发现自己需要同时执行display:block和添加class“on”，请使用setTimeout延迟后者。否则，浏览器只会同时看到这两种情况，并禁用转换。
