我目前正在设计一个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>
（不要忘记转换属性的供应商前缀。）
更多详情请参阅本文。
其他回答
将溢出：隐藏更改为溢出：可见。它工作得更好。我这样使用：
#menu ul li ul {
background-color:#fe1c1c;
width:85px;
height:0px;
opacity:0;
box-shadow:1px 3px 10px #000000;
border-radius:3px;
z-index:1;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.6s ease;
}
#menu ul li:hover ul {
overflow:visible;
opacity:1;
height:140px;
}
可见更好，因为溢出：隐藏的行为与显示：无完全相同。
在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用CSS转换，但CSS动画仍然可以正常工作，因此我们可以使用它们作为解决方法。
示例代码（您可以相应地将其应用于菜单）演示：
将以下CSS添加到样式表中：
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
然后将fadeIn动画应用于父级悬停时的子级（当然还有设置显示：块）：
.parent:hover .child {
display: block;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
更新2019-也支持淡出的方法：
（需要一些JavaScript代码）
//我们需要跟踪淡入元素，以便稍后在CSS中应用淡入document.addEventListener（“动画启动”，函数（e）{if（e.animationName==“淡入”）{e.target.classList.add（'did-fade-in'）；}});document.addEventListener（'animonend'，函数（e）{if（e.animationName===“淡出”）{e.target.classList.remove（'did-fade-in'）；}});第二部分{边框：5px实心；填充：10px；}div:悬停{边框颜色：红色；}.父项.子项{显示：无；}.parent:悬停.child{显示：块；动画：淡入1秒；}.parent:not（：hover）.child.id-fade-in{显示：块；动画：淡出1s；}@关键帧淡入{来自{不透明度：0；}至{不透明度：1；}}@关键帧淡出{来自{不透明度：1；}至{不透明度：0；}}<div class=“parent”>父母亲<div class=“child”>小孩</div></div>
它可以通过使用过渡计时函数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>
在我的例子中，我使用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中随意指定display:none，但是您必须使用JavaScript将其更改为block（或其他任何内容），然后您还必须向有问题的元素添加一个类，该类实际上使用setTimeout（）进行转换。这就是全部。
即。：
<style>
#el {
display: none;
opacity: 0;
}
#el.auto-fade-in {
opacity: 1;
transition: all 1s ease-out; /* Future, future, please come sooner! */
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
</style>
<div id=el>Well, well, well</div>
<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>
这在最新的sane浏览器中进行了测试。显然，它不应该在Internet Explorer 9或更早版本中工作。
