顯示內容過渡：無

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. 預渲染元素的佈局