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

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

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

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

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

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


当前回答

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

其他回答

它可以通过使用过渡计时函数step-end和step-start来处理

例如:https://jsfiddle.net/y72h8Lky/

$(“.run”).on(“click”,函数(){$(“.popup”).addClass(“show”);});$(“.popup”).on(“单击”,函数(){$(“.popup”).removeClass(“show”);}).popup{不透明度:0;显示:块;位置:绝对;顶部:100%;底部:0;左:0;右:0;z指数:1450;背景色:rgba(0,175,236,0.6);过渡:不透明度0.3s缓和,顶部0.3s台阶结束;}.popup.show{过渡:不透明度0.3s缓和,顶部0.3s步进开始;不透明度:1;顶部:0;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div class=“popup”></div><button class=“run”style=“font-size:24px;”>单击我</button>

编辑:在本示例中未应用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/

简单如下:)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

使其褪色,然后使其高度为0;。还要确保使用forward,使其保持在最终状态。

使用CSS动画淡入:

.item {
     display: none;
}

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

您需要通过其他方式隐藏该元素才能使其工作。

我通过绝对定位<div>s并将隐藏的<div>设置为不透明度:0来实现这一效果。

如果您甚至将显示属性从“无”切换为“块”,则不会在其他元素上进行转换。

要解决此问题,请始终允许元素显示为:块,但通过调整以下任何方式隐藏元素:

将高度设置为0。将不透明度设置为0。将元素放置在另一个溢出的元素的框架之外:隐藏。

可能有更多的解决方案,但如果将元素切换为显示:无,则无法执行转换。例如,您可以尝试以下操作:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

但这行不通。根据我的经验,我发现这毫无用处。

因此,您将始终需要保持元素display:block,但您可以通过执行以下操作来绕过它:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}