父元素切换显示属性的子元素上的CSS转换

Question

我读到这个:SO css-transition-from-display-none-on-class-change,但我试图在父元素上切换display属性.是否有解决方法使其工作？

CSS过渡就像这样 小提琴https://jsfiddle.net/v1aym7wd/

HTML:

<div id="wrap">
    <div class="fade"></div>
</div>

CSS:

#wrap {
    background-color: orange;
    width: 200px;
    height: 200px;
    /*display: none;*/
}

#wrap.show {
    /*display: block;*/
}

.fade {
    background-color: green;
    width: 100px;
    height: 100px;
    opacity: 0.2;
    transition: opacity 10s;
}

#wrap.show .fade {
    opacity: 1;
}

JS:

var wrap = document.getElementById('wrap');
wrap.classList.add('show');

但是只要我display:block/none在父元素上切换,CSS转换就不起作用了.为什么是这样？有什么方法可以使它工作？

见这里:https://jsfiddle.net/v1aym7wd/1/

Answer 1

由于display:none父节点也从DOM树中取出后代,因此一种解决方案可能是删除过渡并使用动画.

显示子元素时,动画将启动.

请使用必要的供应商前缀.

.fade {
  opacity: 0.2
}

#wrap.show .fade {
  animation: reveal 10s forwards;
}

@keyframes reveal {
  100% {
    opacity: 1
  }
}

/* set timeout to show how animation starts. */

setTimeout(function reveal() {
  var wrap = document.getElementById('wrap');
  wrap.classList.add('show');
}, 2000);

#wrap {
  background-color: orange;
  width: 200px;
  height: 200px;
  display: none;
}

#wrap.show {
  display: block
}

.fade {
  background-color: green;
  width: 100px;
  height: 100px;
  opacity: 0.2
}

#wrap.show .fade {
  animation: reveal 10s forwards;
}

@keyframes reveal {
  100% {
    opacity: 1
  }
}

<div id="wrap">
  <div class="fade"></div>
</div>

Answer 2

正如CBroe所说，可以通过使用可见性而不是显示来完成。

https://jsfiddle.net/ryanoconr/v1aym7wd/2/

var wrap = document.getElementById('wrap');

wrap.classList.add('show');

#wrap {
    background-color: orange;
    width: 200px;
    height: 200px;
    display: block;
    visibility: hidden;
}

#wrap.show {
  visibility: visible;
}

.fade {
    background-color: green;
    width: 100px;
    height: 100px;
    opacity: 0.2;
    transition: opacity 10s;
}

#wrap.show .fade {
    opacity: 1;
}

<div id="wrap">
    <div class="fade"></div>
</div>

该代码似乎无法在代码片段中运行，但可以在 JSFiddle 上运行