我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单,但包含不同类型的内容。

目前,CSS 3转换似乎不适用于“display”属性,也就是说,您不能进行从display:none到display:block(或任何组合)的任何转换。

当有人悬停在一个顶级菜单项上时,上面示例中的第二层菜单是否有办法“淡入”?

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

我也尝试过使用高度,但那只是失败得很惨。

我也意识到,使用JavaScript实现这一点很简单,但我想挑战一下自己,只使用CSS,我觉得我做得有点短。


当前回答

您可以简单地使用CSS可见性:hidden/visible而不是display:none/block

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

其他回答

不使用显示,您可以将元素存储在“屏幕外”,直到您需要它,然后将其位置设置为您想要的位置,同时对其进行转换。然而,这带来了一系列其他设计问题,因此您的里程可能会有所不同。

无论如何,您可能不想使用显示,因为您希望屏幕阅读器可以访问内容,而屏幕阅读器在很大程度上试图遵守可见性规则-即,如果它不应该被眼睛看到,它就不会作为内容显示给代理。

简单如下:)

@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,使其保持在最终状态。

不需要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

吉列尔莫的回答被接受后,CSS2012-04-03的转换规范改变了可见性转换的行为,现在可以在不使用转换延迟的情况下以更短的方式解决此问题:

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

为两个转换指定的运行时间通常应为相同的(尽管稍微长一点的可见性时间不是问题)。

有关运行版本,请参阅我的博客文章CSS Transition Visibility。

W.r.t.问题的标题“显示器上的转换:财产”,并回应Rui Marques和josh对公认答案的评论:

如果显示器或使用visibility属性(这可能是本问题中的情况)。

它不会完全删除显示的元素:无,只是使其不可见,但它仍保留在文档流中,并影响以下元素的位置。

完全删除与显示类似的元素的转换:不能使用高度(如其他答案和注释所示)、最大高度或边距顶部/底部进行转换,但也可以参见如何转换高度:0;至高度:自动;使用CSS?以及我的博客文章《显示器和高度财产上的CSS转换解决方案》。

针对GeorgeMillo的评论:需要财产和两个变换:不透明度属性用于创建淡入淡出动画和可见性属性,以避免元素仍在鼠标上反应事件。需要在不透明度上进行过渡以获得视觉效果可见性以延迟隐藏,直到淡出完成。

我有一个类似的问题,但我找不到答案。后来几次谷歌搜索把我带到了这里。考虑到我没有找到我所希望的简单答案,我偶然发现了一个既优雅又有效的解决方案。

结果表明,可见性CSS属性具有一个值折叠,通常用于表项。然而,如果在任何其他元素上使用,它会有效地将它们渲染为隐藏的,与显示几乎相同:隐藏,但添加了元素不占用任何空间的功能,您仍然可以为有问题的元素设置动画。

下面是一个简单的例子。

函数toggleVisibility(){let exampleElement=document.querySelector('span');if(exampleElement.classList.incontains('visible')){回来}exampleElement.innerHTML='我不会占用空间!';exampleElement.classList.tggle('hidden');exampleElement.classList.tggle('visible');setTimeout(()=>{exampleElement.classList.tggle('visible');exampleElement.classList.tggle('hidden');}, 3000);}#主要的,主要的{显示:柔性;弯曲方向:柱;宽度:300px;文本对齐:居中;}.隐藏{可见性:塌陷;不透明度:0;过渡:可见性2s,不透明度2s线性;}.可见{可见性:可见;不透明度:1;过渡:可见性0.5s,不透明度0.5s线性;}<div id=“main”><button onclick=“toggleVisibility()”>单击我</按钮><span class=“hidden”></span><span>我会被推回去</span></div>