我目前正在设计一个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;
}

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

其他回答

根据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>

吉列尔莫的回答被接受后,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转换的人都会很快发现,如果你同时修改显示属性(block/none),它们就不起作用了。一个尚未提及的解决方法是,您可以继续使用display:block/none来隐藏/显示元素,但将其不透明度设置为0,这样即使在显示为display:block时,它仍然是不可见的。

然后添加另一个CSS类,例如“on”,将不透明度设置为1,并定义不透明度的转换。正如您可能想象的那样,您必须使用JavaScript将“on”类添加到元素中,但至少您仍在使用CSS进行实际转换。

P.S.如果您发现自己需要同时执行display:block和添加class“on”,请使用setTimeout延迟后者。否则,浏览器只会同时看到这两种情况,并禁用转换。

使用CSS动画淡入:

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fadeIn 0.5s;
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}