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

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

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

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

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

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


当前回答

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

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

其他回答

我巧妙的JavaScript技巧是将整个场景分成两个不同的函数!

为了准备工作,声明了一个全局变量并定义了一个事件处理程序:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

然后,当隐藏元素时,我使用类似这样的方法:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

为了再现元素,我正在执行以下操作:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

到目前为止,它是有效的!

现在可以向块特性添加自定义动画。

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

在这个演示中,子菜单从display:none变为display:block,并且仍然能够淡入淡出。

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

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

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

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

例子: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属性具有一个值折叠,通常用于表项。然而,如果在任何其他元素上使用,它会有效地将它们渲染为隐藏的,与显示几乎相同:隐藏,但添加了元素不占用任何空间的功能,您仍然可以为有问题的元素设置动画。

下面是一个简单的例子。

函数toggleVisibility(){let exampleElement=document.querySelector('span');if(exampleElement.classList.incontains('visible')){回来}exampleElement.innerHTML='我不会占用空间!';exampleElement.classList.tggle('hidden');exampleElement.classList.tggle('visible');setTimeout(()=>{exampleElement.classList.tggle('visible');exampleElement.classList.tggle('hidden');}, 3000);}#主要的,主要的{显示:柔性;弯曲方向:柱;宽度:300px;文本对齐:居中;}.隐藏{可见性:塌陷;不透明度:0;过渡:可见性2s,不透明度2s线性;}.可见{可见性:可见;不透明度:1;过渡:可见性0.5s,不透明度0.5s线性;}<div id=“main”><button onclick=“toggleVisibility()”>单击我</按钮><span class=“hidden”></span><span>我会被推回去</span></div>