黑色面具：使用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-index和顯示的順序有些混亂：內聯樣式中的display：none和unset transition完全不透明； 並通過JS設置其他顯示，過渡和不透明度。 我不確定它是否可以通過這種方式工作（更改一些可轉換的CSS屬性值，更改transition屬性並最終更改第一個屬性值並具有有效的轉換），但是在對轉換設置進行了一些簡單的簡化之后，並始終將其設置為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>