我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
我巧妙的JavaScript技巧是将整个场景分成两个不同的函数！
为了准备工作，声明了一个全局变量并定义了一个事件处理程序：
var tTimeout;
element.addEventListener("transitionend", afterTransition, true);//firefox
element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome
然后，当隐藏元素时，我使用类似这样的方法：
function hide(){
element.style.opacity = 0;
}
function afterTransition(){
element.style.display = 'none';
}
为了再现元素，我正在执行以下操作：
function show(){
element.style.display = 'block';
tTimeout = setTimeout(timeoutShow, 100);
}
function timeoutShow(){
element.style.opacity = 1;
}
到目前为止，它是有效的！
其他回答
我怀疑任何刚开始CSS转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。
然后添加另一个CSS类，例如“on”，将不透明度设置为1，并定义不透明度的转换。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。
P.S.如果您发现自己需要同时执行display:block和添加class“on”，请使用setTimeout延迟后者。否则，浏览器只会同时看到这两种情况，并禁用转换。
不需要JavaScript，也不需要惊人的最大高度。相反，在文本元素上设置最大高度，并使用字体相对单位，例如rem或em。这样，您可以设置比容器更大的最大高度，同时避免菜单关闭时出现延迟或“弹出”：
HTML
<nav>
<input type="checkbox" />
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</nav>
CSS
nav input + ul li { // Notice I set max-height on li, not ul
max-height: 0;
}
nav input:checked + ul li {
max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}
请参阅此处的示例：http://codepen.io/mindfullsilence/pen/DtzjE
在我的例子中，我使用Jquery切换函数来管理元素的可见性，因此我没有使用css来处理转换，而是使用slideToggle来管理可见性并处理转换部分。
<!doctype html><html lang=“en”><head><meta charset=“utf-8”><title>幻灯片切换演示</title><style>p型{宽度：400px；}</style><script src=“https://code.jquery.com/jquery-3.5.0.js“></script></head><body><button id=“toggle button”>切换</button><button id=“slide toggle button”>滑动切换</button><p>这是结束所有段落的段落。你应该感到幸运</em>在你的生活。祝贺</p><脚本>$（“#切换按钮”）.click（function（）{$（“p”）.tggle（）；});$（“#滑动切换按钮”）.click（function（）{$（“p”）.slideToggle（“慢”）；});</script></body></html>
我怀疑，如果显示发生变化，转换被禁用的原因是因为显示实际的功能。它不会改变任何可以想象的流畅动画。
显示：无；可见性：隐藏；是两件完全不同的事情。两者都具有使元素不可见的效果，但具有可见性：隐藏；它仍然呈现在布局中，但只是不明显。隐藏元素仍然占用空间，并且仍然以内联或块、块内联或表的形式呈现，或者以显示元素告诉的方式呈现，并相应地占用空间。其他元素不会自动移动以占用该空间。隐藏元素只是不将其实际像素渲染到输出。
display：另一方面，没有一个实际上阻止元素完全渲染。它不占用任何布局空间。其他原本占据该元素占用的部分或全部空间的元素现在调整为占据该空间，就好像该元素根本不存在一样。
显示不仅仅是另一种视觉属性。它建立了元素的整个呈现模式，例如它是块、内联、内联块、表、表行、表单元格、列表项还是其他任何元素！每一个都有非常不同的布局影响，并且没有合理的方法来动画化或平滑地转换它们（例如，尝试想象从块到内联的平滑转换，反之亦然！）。
这就是为什么如果显示更改（即使更改为none或从none更改为none-none不仅仅是不可见的，它本身的元素渲染模式意味着根本没有渲染！），则会禁用转换。
此解决方案具有极好的兼容性，我还没有见过它：
.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；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。
