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

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

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

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

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

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


当前回答

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

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

其他回答

如果您使用jQuery设置类,这将100%有效:

$(文档).ready(函数){$('按钮').click(函数){var container=$('.container');if(!container.hasClass('active')){container.addClass(“显示”).outerWidth();container.addClass('active');}其他{container.removeClass('active').one('transitioned',function(){container.removeClass(“显示”);});}});});.容器{显示:无;不透明度:0;过渡:不透明度0.3s缓解;}.container.show{显示:柔性;}.容器激活{不透明度:1;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button type=“button”>切换</button><div class=“container”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>

当然,您可以只使用jQuery.fadeIn()和.fadeOut()函数,但设置类的好处是,如果您想转换为块以外的显示值(默认情况下使用.fadeIn)和.fadaOut())。

在这里,我正在过渡到具有良好渐变效果的显示弹性。

我怀疑任何刚开始CSS转换的人都会很快发现,如果你同时修改显示属性(block/none),它们就不起作用了。一个尚未提及的解决方法是,您可以继续使用display:block/none来隐藏/显示元素,但将其不透明度设置为0,这样即使在显示为display:block时,它仍然是不可见的。

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

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

在这种情况下不使用关键帧应用过渡的另一种方法是将元素的宽度设置为零,然后在悬停时取消设置

.className{
  visibility:hidden;
  opacity: 0;
  transition: .2s;
  width:0;
}

.className:hover{
  visibility:visible;
  margin-right: .5rem;
  opacity: 1;
  width:unset;
}

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

在我的例子中,我使用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>