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

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

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

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

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

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


当前回答

使用CSS动画淡入:

.item {
     display: none;
}

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

其他回答

我认为萨尔曼PK有最接近的答案。它可以通过以下CSS动画淡入或淡出项目。但是,显示属性不会平滑地设置动画,只有不透明度。

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

如果你想让元素从显示块移动到不显示块,我看不出目前只使用CSS是可能的。您必须获得高度并使用CSS动画来降低高度。这在CSS中是可能的,如下面的示例所示,但要知道为元素设置动画所需的确切高度值是很困难的。

jsFiddle示例

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

显示不是转换工作的财产之一。

有关可以应用转换的CSS财产的列表,请参阅动画CSS财产。请参阅CSS值和单位模块第4级,组合值:插值、相加和累加,了解如何插值。

9.1中列出了CSS 3。来自CSS的财产(只需关闭警告弹出窗口)

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

上次我不得不这样做时,我使用了max height,这是一个可设置动画的属性(虽然它有点黑客,但确实有效),但要注意,对于复杂的页面或使用低端移动设备的用户来说,它可能非常刺耳。

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

您可以连接两个或更多的转换,而可见性是这次方便的地方。

第二部分{边框:1px实心#eee;}div>ul{可见性:隐藏;不透明度:0;过渡:可见性0s,不透明度0.5s线性;}div:悬停>ul{可见性:可见;不透明度:1;}<div><ul><li>项目1</li><li>项目2</li><li>项目3</li></ul></div>

(不要忘记转换属性的供应商前缀。)

更多详情请参阅本文。

我今天遇到了这个问题,我的立场是:我正在重用的固定模式。我无法保持它的显示:无,然后动画化,因为它只是跳到外观上,而z索引(负值等)也做了奇怪的事情。

我还使用了高度:0到高度:100%,但只有在模态出现时才起作用。这与您使用left时相同:-100%或其他值。

然后我突然想到有一个简单的答案。等等:

首先,你的隐藏模态。请注意高度为0,并查看转换中的高度声明。。。它有一个500毫秒,比我的不透明度转变还要长。记住,这会影响淡出过渡:将模式返回到默认状态。

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

第二,你的可见模态。假设你正在为身体设置一个.mode活动。现在身高是100%,我的转变也发生了变化。我希望高度立即改变,不透明度需要300毫秒。

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

就是这样,它就像一个魅力。