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的{{1}}属性有关。您可以将其display和width设置为height。它具有相同的效果，但允许内部0转换。

getStackTrace

<强> CSS

div

Answer 3

display:none不适用于过渡。我用过以下代码：

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

除了解决转换问题之外，这还可以带来自浏览器以来更好的用户体验：

预取元素的资源（例如图像）和
预呈现元素的布局

在显示内转换：无

3 个答案: