我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
我认为萨尔曼PK有最接近的答案。它可以通过以下CSS动画淡入或淡出项目。但是，显示属性不会平滑地设置动画，只有不透明度。
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
如果你想让元素从显示块移动到不显示块，我看不出目前只使用CSS是可能的。您必须获得高度并使用CSS动画来降低高度。这在CSS中是可能的，如下面的示例所示，但要知道为元素设置动画所需的确切高度值是很困难的。
jsFiddle示例
CSS
@-webkit-keyframes pushDown {
0% {
height: 10em;
}
25% {
height: 7.5em;
}
50% {
height: 5em;
}
75% {
height: 2.5em;
}
100% {
height: 0em;
}
}
.push-down {
-webkit-animation: pushDown 2s forwards linear;
}
JavaScript
var element = document.getElementById("element");
// Push item down
element.className = element.className + " push-down";
其他回答
您也可以使用此选项：
.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;
}
我巧妙的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;
}
到目前为止，它是有效的！
在我的例子中，我使用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>
显示不是转换工作的财产之一。
有关可以应用转换的CSS财产的列表，请参阅动画CSS财产。请参阅CSS值和单位模块第4级，组合值：插值、相加和累加，了解如何插值。
9.1中列出了CSS 3。来自CSS的财产（只需关闭警告弹出窗口）
我也尝试过使用高度，但那只是失败得很惨。
上次我不得不这样做时，我使用了max height，这是一个可设置动画的属性（虽然它有点黑客，但确实有效），但要注意，对于复杂的页面或使用低端移动设备的用户来说，它可能非常刺耳。
简单如下：）
@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，使其保持在最终状态。
