css3 - 无法执行任何种类的过渡 display: none to display: block?

  显示原文与译文双语对照的内容

我目前正在设计一个 CSS'mega下拉 dropdown'菜单- 基本上是一个普通的CSS-only下拉菜单,但其中包含不同类型的内容。

我的问题更像是'你能想出解决这个问题的方法'的问题。
现在,似乎CSS3的过渡并不应用于'显示'属性,换句话说,不能做任何从 display: nonedisplay: block ( 或者任何组合)的转换。

任何人都可以从上面的示例中找到second-tier菜单的方法,当有人在顶层菜单项上悬停时?

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

我也尝试过使用高度,但它失败了。

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

所有和任何建议最欢迎。

时间:

你可以连接两个转换或者更多的转换,而 visibility 是这个时代的用武之地。


div> ul {
. . . 
 visibility:hidden;
 opacity:0;
 transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div:hover> ul {
 visibility:visible;
 opacity:1;
 transition-delay:0s;
}

( 不要忘记 transition 属性的供应商前缀) !

更多细节在中本文 web

你需要用其他方式隐藏元素才能使它的正常工作。 我在上有同样的问题这个 web页面。

我通过定位 <div> 绝对并将隐藏的设置为 opacity: 0 来实现效果。

甚至如果你切换 display 产权 noneblock, 你的转变不会发生其他元素。

要解决这个问题,总是允许元素是 display: block,但通过调整以下任一方法来隐藏元素:

  1. height 设置为 0
  2. opacity 设置为 0
  3. 将元素置于具有 overflow: hidden的另一个元素的框架之外。

可能有更多的解决方案,但是如果将元素切换到 display: none,则无法执行转换。 例如你可以尝试尝试这样的尝试:


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

如果你试图改变 display 属性,所有主流浏览器都会禁用CSS转换,但是CSS动画仍然可以正常工作,所以我们可以使用它们作为 work-around 。

Code:- ( 你可以将它应用到你的菜单中) [ Demo ]的示例

将以下CSS添加到样式表中:-


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

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

然后将 fadeIn 动画应用到父 hover:- 上的子对象( 当然也可以设置为 display: block )


.parent:hover. child {
 display: block;

 -webkit-animation: fadeIn 1s;
 animation: fadeIn 1s;
}

display 不是转换工作的属性之一。

查看 http://www.w3.org/TR/css3-transitions/#animatable-properties-,获取可以应用到它们的转换的属性列表。

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

它工作得很好,到目前为止 !

我今天遇到了一个我正在重用的position: fixed 模式。 我不能保持它的display: none,然后动画它,因为它刚刚进入外观,并且 z-index ( 负值等) 也做了奇怪的事情。

我也使用了 height: 0height: 100%,但它只在模式出现时工作。 这跟你使用 left: -100% 或者其他东西一样。

然后我想到了一个简单的答案。 等一下:

英镑, 你隐藏的模式。 注意 height0,并在转换中签出 height 声明。。 它有一个 500ms,,比我的opacity 过渡长。 记住,这会影响 out-going fade-out转换: 将模式返回到默认状态。


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

秒, 你的可见模式。 假设你正在将一个 .modal-active 设置为 body 。 现在 height100%,我的转换也改变了。 我希望 height 立即被更改,并且 opacity 需要 300ms


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

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

overflow:hidden 更改为 overflow:visible 。它可以更好地工作。 我这样使用:


#menu ul li ul {
 background-color:#fe1c1c;
 width:85px;
 height:0px;
 opacity:0;
 box-shadow:1px 3px 10px #000000;
 border-radius:3px;
 z-index:1;
 -webkit-transition:all 0.5s ease;
 -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul {
 overflow:visible;
 opacity:1;
 height:140px;
}

visible 更好,因为 overflow:hidden 像一个 display:none

从下面的几个答案和一些建议中,下面的工作非常适合悬停菜单( 我在 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;
}

你也可以使用高度代替max-height如果你同时指定了两个值,因为在转换时不允许使用 height:auto 。 max-height的悬停值需要大于菜单的高度。

...