黑色面具：使用javascript无效的css过渡

Question

我的代码

function obscure(){
    var content = document.getElementById("oscura");
	content.style.display="";
	content.style.opacity = 0;
	content.style.transition = "opacity 3s";
	content.style.opacity = 0.4;
}

<div id="oscura" style="top:0; min-width:100%; min-height:100%; position:absolute; z-index:9; background-color:black; display:none; opacity:1;"></div>
<button onclick="obscure();">obscure</button>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra imperdiet libero, in iaculis nulla fermentum vel. Fusce sit amet nulla rhoncus, porttitor tellus venenatis, pellentesque augue. Morbi orci massa, ultricies a lacinia non, luctus eget nunc. Vestibulum ornare placerat arcu, sit amet accumsan est tristique in. Quisque nec orci sit amet lorem pharetra vestibulum. Curabitur ac dui rutrum, pretium massa nec, lobortis dolor. Proin dictum non lacus ac bibendum. Suspendisse hendrerit quam tempor fringilla rhoncus. Quisque lectus elit, fermentum at condimentum at, molestie eget lectus. Etiam at urna nec ex sagittis porttitor. Mauris scelerisque, nibh vitae placerat imperdiet, tellus lorem semper sem, at dignissim lorem dui sed est. Nunc iaculis laoreet sem, sed malesuada turpis vehicula at. Vestibulum consequat leo eget scelerisque maximus. Vivamus quis arcu et urna iaculis facilisis. Donec sit amet risus lectus.
</div>

应该做什么

应用黑色面具，过渡时间应为3秒

什么不起作用

正确应用蒙版，但没有过渡

我在哪里测试了我的代码

关于最新版本的chrome和firefox for Windows 10

我的问题

如何解决此问题？

Answer 1

问题是你有一点设置不透明度，z-index和显示的乱序：在内联样式中它是完全不透明的display：none和unset过渡;并在via JS中设置其他显示，过渡和不透明度。我不确定它是否能够以这种方式工作（更改一些可转换的CSS属性值，更改transition属性并最终更改第一个属性值并进行工作转换），但是在稍微简化了初始转换集并使用allways-display-block之后-layer-hidden-behind-document它确实有效，如下所示：

function obscure(on) {
  var content = document.getElementById("oscura");
  content.style.opacity = on ? 0.5 : 0;
  content.style.zIndex = on ? 9 : -1;
}

#oscura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: black;
  display: block;
  opacity: 0;
  transition: opacity 3s;
}

<div id="oscura" onclick="obscure(false);"></div>
<button onclick="obscure(true);">obscure</button>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra imperdiet libero, in iaculis nulla fermentum vel. Fusce sit amet nulla rhoncus, porttitor tellus venenatis, pellentesque augue. Morbi orci massa, ultricies a lacinia non, luctus eget
  nunc. Vestibulum ornare placerat arcu, sit amet accumsan est tristique in. Quisque nec orci sit amet lorem pharetra vestibulum. Curabitur ac dui rutrum, pretium massa nec, lobortis dolor. Proin dictum non lacus ac bibendum. Suspendisse hendrerit quam
  tempor fringilla rhoncus. Quisque lectus elit, fermentum at condimentum at, molestie eget lectus. Etiam at urna nec ex sagittis porttitor. Mauris scelerisque, nibh vitae placerat imperdiet, tellus lorem semper sem, at dignissim lorem dui sed est. Nunc
  iaculis laoreet sem, sed malesuada turpis vehicula at. Vestibulum consequat leo eget scelerisque maximus. Vivamus quis arcu et urna iaculis facilisis. Donec sit amet risus lectus.
</div>

Answer 2

尝试使用css animation

＆＃13;

＆＃13;

function obscure(){
    var content = document.getElementById("oscura");
    content.className = "mask";
    content.style.display = "block";
}

＆＃13;

#oscura {
  top:0;
  min-width:100%;
  min-height:100%;
  position:absolute;
  /* set `opacity` to complete `opacity` at `keyframes` */
  opacity:0.4; 
  z-Index:9;
  background-color:black;
  display:none;
}

.mask {
  animation: mask 3s;
  -webkit-animation: mask 3s;
}

@keyframes mask {
  from {    
    opacity:0.0;
  }
  to {
    opacity:0.4;
  }
}

@-webkit-keyframes mask {
  from {    
    opacity:0.0;
  }
  to {
    opacity:0.4;
  }
}

＆＃13;

<div id="oscura" style=""></div>
<button onclick="obscure();">obscure</button>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra imperdiet libero, in iaculis nulla fermentum vel. Fusce sit amet nulla rhoncus, porttitor tellus venenatis, pellentesque augue. Morbi orci massa, ultricies a lacinia non, luctus eget nunc. Vestibulum ornare placerat arcu, sit amet accumsan est tristique in. Quisque nec orci sit amet lorem pharetra vestibulum. Curabitur ac dui rutrum, pretium massa nec, lobortis dolor. Proin dictum non lacus ac bibendum. Suspendisse hendrerit quam tempor fringilla rhoncus. Quisque lectus elit, fermentum at condimentum at, molestie eget lectus. Etiam at urna nec ex sagittis porttitor. Mauris scelerisque, nibh vitae placerat imperdiet, tellus lorem semper sem, at dignissim lorem dui sed est. Nunc iaculis laoreet sem, sed malesuada turpis vehicula at. Vestibulum consequat leo eget scelerisque maximus. Vivamus quis arcu et urna iaculis facilisis. Donec sit amet risus lectus.
</div>

＆＃13;

＆＃13;

＆＃13;