html - 父元素切换显示属性的子元素上的 CSS 过渡

Question

我读到这个:SO css-transition-from-display-none-on-class-change但我正在尝试切换父元素上的显示属性。是否有解决方法可以使其正常工作？

CSS 过渡是这样工作的 fiddle 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 过渡就不起作用了。为什么是这样？有什么办法让它发挥作用吗？

See here: 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>