显示屏上的转换：属性

Question

显示屏上的转换：属性

我目前正在设计一个CSS'mega dropdown'菜单 - 基本上是一个常规的CSS-only下拉菜单，但包含不同类型的内容。

目前，似乎CSS3过渡不适用于“display”属性，即你不能做任何类型的过渡display: none到display: block（或任意组合）。

当有人将鼠标悬停在其中一个顶级菜单项上时，是否有人会想到上述示例中的第二层菜单可以“淡入”？

我知道你可以在visibility:属性上使用转换，但我想不出有效利用它的方法。

我也尝试过使用身高，但这只是失败了。

我也知道使用JavaScript实现这一点是微不足道的，但我想挑战自己只使用CSS而且我认为我现在有点短。

欢迎所有和任何建议。

Answer 1

您可以连接两个或更多转换，visibility这次是方便的。div {&nbsp; border: 1px solid #eee;}div > ul {&nbsp; visibility: hidden;&nbsp; opacity: 0;&nbsp; transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {&nbsp; visibility: visible;&nbsp; opacity: 1;}<div>&nbsp; <ul>&nbsp; &nbsp; <li>Item 1</li>&nbsp; &nbsp; <li>Item 2</li>&nbsp; &nbsp; <li>Item 3</li>&nbsp; </ul></div>不要忘记transition属性的供应商前缀）更多细节在本文中

Answer 2

在本文发表时，如果您尝试更改display属性，所有主流浏览器都会禁用CSS过渡，但CSS动画仍然可以正常工作，因此我们可以将它们用作解决方法。示例代码： -&nbsp;（您可以相应地将它应用于您的菜单）&nbsp;演示将以下CSS添加到样式表： -@-webkit-keyframes&nbsp;fadeIn&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;from&nbsp;{&nbsp;opacity:&nbsp;0;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to&nbsp;{&nbsp;opacity:&nbsp;1;&nbsp;}}&nbsp;&nbsp;@keyframes&nbsp;fadeIn&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;from&nbsp;{&nbsp;opacity:&nbsp;0;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to&nbsp;{&nbsp;opacity:&nbsp;1;&nbsp;}}然后将fadeIn动画应用于父hover上的子项： - （当然设置display: block）.parent:hover&nbsp;.child&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation:&nbsp;fadeIn&nbsp;1s; &nbsp;&nbsp;&nbsp;&nbsp;animation:&nbsp;fadeIn&nbsp;1s;}更新2019 - 也支持淡出的方法：（有些JS需要）// We need to keep track of faded in elements so we can apply fade out later in CSSdocument.addEventListener('animationstart', function (e) {&nbsp; if (e.animationName === 'fade-in') {&nbsp; &nbsp; &nbsp; e.target.classList.add('did-fade-in');&nbsp; &nbsp;&nbsp; }});document.addEventListener('animationend', function (e) {&nbsp; if (e.animationName === 'fade-out') {&nbsp; &nbsp; &nbsp; e.target.classList.remove('did-fade-in');&nbsp; &nbsp;}});div {&nbsp; &nbsp; border: 5px solid;&nbsp; &nbsp; padding: 10px;}div:hover {&nbsp; &nbsp; border-color: red;}&nbsp;.parent .child {&nbsp; display: none;}&nbsp;.parent:hover .child {&nbsp; display: block;&nbsp; animation: fade-in 1s;}.parent:not(:hover) .child.did-fade-in {&nbsp; display: block;&nbsp; animation: fade-out 1s;}&nbsp;@keyframes fade-in {&nbsp; from {&nbsp;&nbsp; &nbsp; opacity: 0;&nbsp;&nbsp; }&nbsp; to {&nbsp;&nbsp; &nbsp; opacity: 1;&nbsp;&nbsp; }}@keyframes fade-out {&nbsp; from {&nbsp;&nbsp; &nbsp; opacity: 1;&nbsp;&nbsp; }&nbsp; to {&nbsp;&nbsp; &nbsp; opacity: 0;&nbsp; }}<div class="parent">&nbsp; &nbsp; Parent&nbsp; &nbsp; <div class="child">&nbsp; &nbsp; &nbsp; &nbsp; Child&nbsp; &nbsp; </div></div>