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

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 的最新版本上 windows 10

我的问题

我该如何解决这个问题？

Answer 1

问题是你设置不透明度、z-index 和显示的顺序有点混乱：在内联样式中它是完全不透明的 display:none 和未设置的过渡；并通过 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

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>

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

Black mask: css transition applied with javascript not working

html

javascript

css

css-transitions

我的代码

它应该做什么

什么不起作用

我在哪里测试我的代码

我的问题