我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
在我的例子中，我使用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>
其他回答
我巧妙的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;
}
到目前为止，它是有效的！
您需要通过其他方式隐藏该元素才能使其工作。
我通过绝对定位＜div＞s并将隐藏的＜div＞设置为不透明度：0来实现这一效果。
如果您甚至将显示属性从“无”切换为“块”，则不会在其他元素上进行转换。
要解决此问题，请始终允许元素显示为：块，但通过调整以下任何方式隐藏元素：
将高度设置为0。将不透明度设置为0。将元素放置在另一个溢出的元素的框架之外：隐藏。
可能有更多的解决方案，但如果将元素切换为显示：无，则无法执行转换。例如，您可以尝试以下操作：
div {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
但这行不通。根据我的经验，我发现这毫无用处。
因此，您将始终需要保持元素display:block，但您可以通过执行以下操作来绕过它：
div {
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
div.active {
opacity: 1;
height: auto;
}
我已经多次遇到这个问题，现在只是简单地说：
.block {
opacity: 1;
transition: opacity 250ms ease;
}
.block--invisible {
pointer-events: none;
opacity: 0;
}
通过添加类块（不可见），整个元素将不可单击，但它后面的所有元素都将是因为指针事件：所有主要浏览器都不支持（没有IE＜11）。
根据W3C工作草案2013年11月19日，显示器不是可设置动画的属性。幸运的是，可见性是可设置动画的。您可以用不透明度的过渡（JSFiddle）链接其过渡：
HTML格式：<a href=“http://example.com“id=”foo“>foo”</a><button id=“hide button”>隐藏</button><button id=“show button”>显示</button>CSS：#食品{过渡特性：可见性，不透明度；转换持续时间：0s，1s；}#foo.hidden餐厅{不透明度：0；可见性：隐藏；过渡特性：不透明度，可见性；转换持续时间：1s，0s；转换延迟：0s，1s；}用于测试的JavaScript：var foo=文档.getElementById（'fo'）；document.getElementById（'hide-button'）.onclick=函数（）{foo.className=“隐藏”；};document.getElementById（'show-button'）.onclick=函数（）{foo.className=“”；};
请注意，如果您只是使链接透明，而不设置可见性：隐藏，那么它将保持可单击状态。
它可以通过使用过渡计时函数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>
