我看到了这个链接:SO css-transition-from-display-none-on-class-change,但是我想在父元素上切换显示属性。有没有一种方法可以使它起作用?
CSS过渡效果的工作原理如下:fiddle https://jsfiddle.net/v1aym7wd/ HTML:
CSS:
但是,一旦我在父元素上切换
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过渡就不起作用了。为什么会这样?有什么方法可以让它工作吗?
点击此处查看示例:https://jsfiddle.net/v1aym7wd/1/