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

其他回答

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

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

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

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

您也可以使用此选项:

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

在我的例子中,我使用Jquery切换函数来管理元素的可见性,因此我没有使用css来处理转换,而是使用slideToggle来管理可见性并处理转换部分。

<!doctype html><html lang=“en”><head><meta charset=“utf-8”><title>幻灯片切换演示</title><style>p型{宽度:400px;}</style><script src=“https://code.jquery.com/jquery-3.5.0.js“></script></head><body><button id=“toggle button”>切换</button><button id=“slide toggle button”>滑动切换</button><p>这是结束所有段落的段落。你应该感到幸运</em>在你的生活。祝贺</p><脚本>$(“#切换按钮”).click(function(){$(“p”).tggle();});$(“#滑动切换按钮”).click(function(){$(“p”).slideToggle(“慢”);});</script></body></html>