黑色掩码:用javascript应用的css转换不起作用
Black mask: css transition applied with javascript not working
我的代码
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的最新版本
我的问题
如何解决此问题?
问题是设置不透明度、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>
尝试使用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转换没有响应
- 将webkit从CSS转换为JavaScript
- css转换高度不起作用
- 鼠标悬停时的css转换
- CSS转换立即进入最终状态
- 选项卡式元素上的动画CSS转换
- 通过JS添加类时应用CSS转换
- 更好的解决方案HTML元素幻灯片从右侧CSS转换
- 使用JavaScript触发CSS转换
- 使用带有javascript的span创建CSS转换
- jQuery addClass中断延迟,或者jQuery延迟中断CSS转换,或者两者兼而有之
- CSS转换获胜't在没有“setTimeout”的情况下运行
- CSS转换后用新内容替换空白
- 如何在不使用css转换的情况下将jQuery animate与css3属性相结合
- CSS 转换不会在没有 setTimeout 的情况下运行
- 拖动和调整 CSS 转换元素的大小
- 当到达屏幕顶部时,jquery/css转换
- CSS-3转换错误,菜单出现卡住
- 在CSS转换期间显示元素的大小值
- 我可以检测任意CSS转换是否已经启动吗