在显示中转换：无答案

【问题标题】：transitioning within display: none在显示中转换：无
【发布时间】：2015-09-21 16:44:48
【问题描述】：

我有一个内部和外部 div。当外部 div 从 display: none 变为 display: block 时，内部 div 应该从 opacity 0 过渡到 opacity 1。但是这不起作用，内部 div 会立即变为 opacity 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');
});

【问题讨论】：

另外，谁能解释一下为什么这不起作用？

标签： css

【解决方案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);
});

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

display:none 不适用于过渡。我改用了以下内容：

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

除了解决过渡问题之外，这也带来了自浏览器以来更好的用户体验：

预取元素的资源（例如图片），并且
预渲染元素的布局

【讨论】：