父元素切换显示属性的子元素上的 CSS 过渡答案

【问题标题】：CSS transition on child element where parent toggles display property父元素切换显示属性的子元素上的 CSS 过渡
【发布时间】：2017-01-29 09:20:55
【问题描述】：

我读到这个：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/

【问题讨论】：

当您将display: none 设置为父母时，孩子也不会显示在屏幕上...所以我猜转换不起作用...
如果您可以使用可见性而不是显示，它应该可以工作。（如果你不能有可见性的效果：隐藏它保留了元素需要的空间，那么尝试将它与宽度/高度 0 组合并将溢出设置为隐藏。）
当然。 Fiddle。我不知道为什么显示不能转换。所以我不会在下面添加这个。我设置了一个超时时间，以便您知道它会在显示更改时启动。
如果您使用两个类，一个在包装器上，一个在淡入淡出元素上，并且分别添加它们，也可以使用：jsfiddle.net/v1aym7wd/5
“即使我们不知道为什么” – 我们知道，@kukkuz 在第一条评论中提到的就是原因。浏览器不会渲染带有 display:none 的元素或它们的任何子元素——就渲染而言，它们的行为就好像它们甚至不是 DOM 树的一部分。因此，您的淡入淡出元素没有为不透明度设置初始值。当#wrap 添加show 类时，它立即获得不透明度值1 - 所以在这种情况下没有什么可以转换的。

标签： html css

【解决方案1】：

试试这个：

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>

【讨论】：

与我在上面创建的第一个示例 (jsfiddle.net/v1aym7wd) 没有区别，除了 setTimeOut 和删除了 cmets。所以没有任何改变会有所帮助。

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

代码似乎在 sn-p 中不起作用，但在 JSFiddle 上起作用

【讨论】：

我的速度不够快，无法检查所有 cmets 和答案，遗憾的是我无法从 display 属性更改为 visible
如果您无法从显示更改为可见性，那么我现在唯一能想到的就是同时使用更改父级和显示的不透明度。跨度>
感谢您的帮助：Ankith 在上面的 cmets 中为我找到了一个可行的解决方案：see here

【解决方案3】：

由于父级上的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>

【讨论】：

我怎么没想到！解决老问题的好方法。