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

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

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

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

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

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


当前回答

我今天遇到了这个问题,我的立场是:我正在重用的固定模式。我无法保持它的显示:无,然后动画化,因为它只是跳到外观上,而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;
}

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

其他回答

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

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

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

更多详情请参阅本文。

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

您也可以使用此选项:

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

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

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

我巧妙的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;
}

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