黑色掩码:用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秒

什么不起作用

掩模应用正确，但没有过渡

我在哪里测试代码

关于windows 10 的chrome和firefox的最新版本

我的问题

如何解决此问题？

Answer 1

问题是设置不透明度、z索引和显示的顺序有点混乱：在内联样式中，它是完全不透明的，带有display:none和unset转换；并通过JS设置其他显示、过渡和不透明度。我不确定它是否能以这种方式工作（更改一些可转换的CSS属性值，更改transition属性，最后更改第一个属性值并进行工作转换），但经过最初设置的转换和隐藏在文档后面的所有显示块层的轻微简化，它确实能工作，如下所示：

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

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

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

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