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

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

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

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

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

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


当前回答

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

例子: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);
}

其他回答

从这些答案和其他地方的一些建议中,以下内容非常适合悬停菜单(我在Bootstrap 3中使用了这一点):

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

如果同时指定两个值,也可以使用height代替max height,因为height:auto不允许用于过渡。最大高度的悬停值需要大于菜单的高度。

您也可以使用此选项:

.dropdown {
    height: 0px;
    width: 0px;
    opacity: .0;
    color: white;
}
.dropdown:hover {
    height: 20px;
    width: 50px;
    opacity: 1;
    transition: opacity 200ms;
    /* Safari */
    -webkit-transition: opacity 200ms;
}

您可以使用转换事件来实现这一点,因此您为转换构建了两个CSS类,一个保存动画,另一个保存display none状态。你在动画结束后切换它们?在我的例子中,如果我按下一个按钮,我可以再次显示div,并删除这两个类。

尝试下面的代码段。。。

$(文档).ready(函数){//分配转换事件$(“table”).on(“animationend webkitAnimationEnd”,“.visibility_switch_off”,函数(事件){//我们检查这是否是我们想要的动画如果(event.originalEvent.animationName==“col_hide_anim”){//在动画之后,我们分配了这个基本上隐藏元素的新类。$(this).addClass(“动画助手显示无”);}});$(“按钮”).click(函数(事件){$(“table tr.hide col”).tggleClass(函数){//我们以切换方式切换动画类。。。//我们知道在动画结束后//动画助手将不显示额外内容//类,当我们需要删除时//根据切换再次显示元素//状态,所以我们在它们之间建立了关系。if($(this).is(“.animation helper display none”)){//我正在切换,然后已经有了上面的课程//我们希望它显示元素,因此我们删除//两个类。。。返回“visibility_switch_off动画助手显示无”;}其他{//这里我们只想隐藏元素,所以我们//添加动画类,另一个将被添加//稍后是animationend事件。。。返回“visibility_switch_off”;}});});});表th{背景色:灰色;}表td{背景色:白色;填充:5px;}.animation助手显示无{显示:无;}表tr.visibility_switch_off{动画填充模式:向前;动画名称:col_hide_anim;动画持续时间:1s;}@-webkit关键帧col_hide_anim{0%{不透明度:1;}100%{不透明度:0;}}@-moz关键帧col_hide_anim{0%{不透明度:1;}100%{不透明度:0;}}@-o-keyframe col_hide_anim{0%{不透明度:1;}100%{不透明度:0;}}@关键帧col_hide_anim{0%{不透明度:1;}100%{不透明度:0;}}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><表><theader><tr><th>名称</th>年龄</th><th>国家</th></tr></theader><tbody><tr><td>姓名</td>年龄</td><td>国家/地区</td></tr></tbody></table><button>切换-使用渐变动画隐藏“年龄”列,并在</button>之后不显示

在本文发表时,如果您尝试更改显示属性,所有主要浏览器都会禁用CSS转换,但CSS动画仍然可以正常工作,因此我们可以使用它们作为解决方法。

示例代码(您可以相应地将其应用于菜单)演示:

将以下CSS添加到样式表中:

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将fadeIn动画应用于父级悬停时的子级(当然还有设置显示:块):

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

更新2019-也支持淡出的方法:

(需要一些JavaScript代码)

//我们需要跟踪淡入元素,以便稍后在CSS中应用淡入document.addEventListener(“动画启动”,函数(e){if(e.animationName==“淡入”){e.target.classList.add('did-fade-in');}});document.addEventListener('animonend',函数(e){if(e.animationName===“淡出”){e.target.classList.remove('did-fade-in');}});第二部分{边框:5px实心;填充:10px;}div:悬停{边框颜色:红色;}.父项.子项{显示:无;}.parent:悬停.child{显示:块;动画:淡入1秒;}.parent:not(:hover).child.id-fade-in{显示:块;动画:淡出1s;}@关键帧淡入{来自{不透明度:0;}至{不透明度:1;}}@关键帧淡出{来自{不透明度:1;}至{不透明度:0;}}<div class=“parent”>父母亲<div class=“child”>小孩</div></div>

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

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