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

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

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

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

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

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


当前回答

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

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

其他回答

编辑:在本示例中未应用display none。

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

上面发生的是,99%的动画显示设置为阻止,而不透明度逐渐消失。在最后一刻,display属性设置为none。

最重要的一点是使用动画填充模式在动画结束后保留最后一帧:向前

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

以下是两个示例:https://jsfiddle.net/qwnz9tqg/3/

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

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

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

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

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

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

我终于为我找到了一个解决方案,将不透明度与绝对位置相结合(隐藏时不占用空间)。

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

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