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

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

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

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

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

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


当前回答

我找到了更好的方法来解决这个问题,你可以使用CSS动画,并为显示项目创造出很棒的效果。

.item {
     display: none;
}

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

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

其他回答

您可以使用转换事件来实现这一点,因此您为转换构建了两个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>之后不显示

我已经多次遇到这个问题,现在只是简单地说:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

通过添加类块(不可见),整个元素将不可单击,但它后面的所有元素都将是因为指针事件:所有主要浏览器都不支持(没有IE<11)。

从这些答案和其他地方的一些建议中,以下内容非常适合悬停菜单(我在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不允许用于过渡。最大高度的悬停值需要大于菜单的高度。

显示不是转换工作的财产之一。

有关可以应用转换的CSS财产的列表,请参阅动画CSS财产。请参阅CSS值和单位模块第4级,组合值:插值、相加和累加,了解如何插值。

9.1中列出了CSS 3。来自CSS的财产(只需关闭警告弹出窗口)

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

上次我不得不这样做时,我使用了max height,这是一个可设置动画的属性(虽然它有点黑客,但确实有效),但要注意,对于复杂的页面或使用低端移动设备的用户来说,它可能非常刺耳。

您可以简单地使用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;
}