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

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

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

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

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

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


当前回答

将溢出:隐藏更改为溢出:可见。它工作得更好。我这样使用:

#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;
}

可见更好,因为溢出:隐藏的行为与显示:无完全相同。

其他回答

它可以通过使用过渡计时函数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>

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

结果表明,可见性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>

根据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=“”;};

请注意,如果您只是使链接透明,而不设置可见性:隐藏,那么它将保持可单击状态。

我感谢所有的回答。以下是我用于类似目的的内容:过渡与动画。

例子:https://jsfiddle.net/grinevri/tcod87Le/22/

<div class="animation"></div>
<div class="transition"></div>
@keyframes animationTo {
  0% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: rgba(0, 0, 0, 0.5); }
}

@keyframes animationFrom {
  0% { background-color: rgba(0, 0, 0, 0.5); }
  100% { background-color: rgba(0, 0, 0, 0.1); }
}

.animation,
.transition{
  margin: 5px;
  height: 100px;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.1);
}

.animation{
  animation: animationFrom 250ms;
}

.animation:hover{
  background-color: rgba(0, 0, 0, 0.5);
  animation: animationTo 250ms;
}

.transition{
  transition: background-color 250ms;
}

.transition:hover{
  background-color: rgba(0, 0, 0, 0.5);
}

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

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