父元素切换显示属性的子元素上的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>

Answer 2

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

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

＆＃13;

＆＃13;

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

wrap.classList.add('show');

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

代码似乎无法在代码段中运行，但它正在使用JSFiddle

Answer 3

试试这个：

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

#wrap {
    background-color: orange;
    width: 200px;
    height: 200px;
    opacity: 0;
}

#wrap.show {
   opacity: 1;
}

.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>