我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
如果您使用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（））。
在这里，我正在过渡到具有良好渐变效果的显示弹性。
其他回答
编辑：在本示例中未应用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/
此解决方案具有极好的兼容性，我还没有见过它：
.hidden-element {
position: absolute;
z-index: -1;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity .5s ease-out;
}
.hidden-element.visible {
position: static;
z-index: auto;
pointer-events: auto;
visibility: visible;
opacity: 1;
}
说明：它使用了可见性：隐藏技巧（与“显示和动画”在一个步骤中兼容），但它使用了组合位置：绝对；z指数：-1；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。
如果您使用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（））。
在这里，我正在过渡到具有良好渐变效果的显示弹性。
我启动了一个名为[Tggle Display Animate][1]的开源骨架项目。
这个骨架助手将允许您轻松模拟jQuery显示/隐藏，但使用输入/输出CSS3转换动画。
它使用类切换，因此您可以在元素上使用除display之外的任何CSS方法：none|block|table|inline等，以及可以想到的其他替代用法。
它的主要设计目的是用于元素切换状态，并且它支持还原状态，其中隐藏对象允许您反向运行关键帧或播放隐藏元素的替代动画。
我正在研究的概念的大部分标记都是CSS，实际使用的JavaScript很少。
它可以通过使用过渡计时函数step-end和step-start来处理
例如：https://jsfiddle.net/y72h8Lky/
$（“.run”）.on（“click”，函数（）{$（“.popup”）.addClass（“show”）；});$（“.popup”）.on（“单击”，函数（）{$（“.popup”）.removeClass（“show”）；}).popup{不透明度：0；显示：块；位置：绝对；顶部：100%；底部：0；左：0；右：0；z指数：1450；背景色：rgba（0，175，236，0.6）；过渡：不透明度0.3s缓和，顶部0.3s台阶结束；}.popup.show{过渡：不透明度0.3s缓和，顶部0.3s步进开始；不透明度：1；顶部：0；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div class=“popup”></div><button class=“run”style=“font-size:24px；”>单击我</button>
