显示内容过渡：无

Question

我有一个内部和外部的div。当外部div从display：none更改为display：block时，内部div应该从不透明度0转变为不透明度1.但这不起作用，但内部div会立即转到不透明度1.任何想法为什么？下面小提琴 -

http://jsfiddle.net/bradjohnwoods/umureqvq/

<div id="outer" class="hide"> 
    <div id="inner" class="hide"> 
    </div> 
</div> 

<button type="button">press</button> 

div#outer{ 
    height: 200px; 
    width: 200px; 
    background-color: tomato; 
} 

div#inner{ 
    height: 100px; 
    width: 100px; 
    background-color: lightgrey; 
    opacity: 1; 
    transition: all 1000ms; 
} 

div#outer.hide{ 
    display: none; 

} 

div#inner.hide{ 
    opacity: 0; 
} 

var outer = $('#outer'); 
var inner = $('#inner'); 
var btn = $('button'); 

btn.click(function(event){ 
    outer.removeClass('hide') 
    inner.removeClass('hide'); 
}); 

Answer 1

我认为这是试图在它的改变是可见的同时褪色，因此从技术上讲尚不可见。因此它没有进行过渡。设置超时强制它首先可见，然后处理不透明度。

http://jsfiddle.net/umureqvq/6/

var outer = $('#outer'); 
var inner = $('#inner'); 
var btn = $('button'); 

btn.click(function (event) { 
    outer.removeClass('hide'); 
    setTimeout(function() { 
     inner.removeClass('hide'); 
    }, 0); 
}); 

Answer 2

它与外div的display物业办。您可以将它的width和height改为0。它具有相同的效果，但允许内部div转换。

Updated JSFiddle

CSS

div#outer{ 
    height: 200px; 
    width: 200px; 
    background-color: tomato; 
    overflow: hidden; 
} 

div#inner{ 
    height: 100px; 
    width: 100px; 
    background-color: lightgrey; 
    opacity: 1; 
    transition: all 1000ms; 
} 

div#outer.hide{ 
    width: 0; 
    height: 0; 

} 

div#inner.hide{ 
    opacity: 0; 
} 

Answer 3

display:none不与过渡很好地工作。我用下面的代替：

.hide { 
    display: block; 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

除了解决过渡问题，这也导致，因为浏览器更好的用户体验：

1. 预取元素的资源（例如图像）和
2. 预渲染元素的布局