CSS转换不会向后工作
CSS转换不会向后工作
提问于 2018-07-27 05:31:46
我有我有一个标准的不透明动画，但它不能以相反的顺序工作。下面是JSFiddle link的报道。如果我正确地理解了文档，它应该会自动工作。我是js的初学者，所以这是javascript的问题吗？或者CSS动画是错误的？
HTML：
<div id="bg_layer" class="bg_layer"></div>
<div id="clicker" class="grey"></div>
<div id="galery" class="galery" ></div>JS：
clicker.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0.7";
bg_layer.style.visibility = 'visible';
galery.style.visibility = 'visible';
document.getElementById("galery").style.opacity = "1";};
bg_layer.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0";
bg_layer.style.visibility = 'hidden';
galery.style.visibility = 'hidden';
document.getElementById("galery").style.opacity = "0";
}CSS：
html{
min-height:100%;
position:relative;}
body {background-image: url(img/wall.jpg);
background-repeat: repeat;
margin: 0 0 0 0;
height: 100%;
}
.grey {
float: right;
background: #d6d6d6;
width:300px;
height:300px;
margin: 20px 0 20px 0;
}
.bg_layer {
position: absolute;
visibility: hidden;
width: 100%;
height: auto;
min-height: 100%;
z-index: 98;
opacity: 0;
background: #000000;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.galery {
visibility: hidden;
position: absolute;
top: 100px;
margin: auto;
width: 170px;
height: 70px;
background: #ff0000;
opacity: 0;
z-index: 99;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-27 05:41:07
将转换属性从transition: opacity 0.5s ease-in-out更改为transition: all 0.5s ease-in-out，这样更改的任何样式属性都将启动转换。
clicker.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0.7";
bg_layer.style.visibility = 'visible';
galery.style.visibility = 'visible';
document.getElementById("galery").style.opacity = "1";};
bg_layer.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0";
bg_layer.style.visibility = 'hidden';
galery.style.visibility = 'hidden';
document.getElementById("galery").style.opacity = "0";
}html{
min-height:100%;
position:relative;
scroll-behavior: smooth;
}
body {background-image: url(img/wall.jpg);
background-repeat: repeat;
margin: 0 0 0 0;
height: 100%;
}
.grey {
float: right;
background: #d6d6d6;
width:300px;
height:300px;
margin: 20px 0 20px 0;
}
.bg_layer {
position: absolute;
visibility: hidden;
width: 100%;
height: auto;
min-height: 100%;
z-index: 98;
opacity: 0;
background: #000000;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.galery {
visibility: hidden;
position: absolute;
top: 100px;
margin: auto;
width: 170px;
height: 70px;
background: #ff0000;
opacity: 0;
z-index: 99;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}<div id="bg_layer" class="bg_layer"></div>
<div id="clicker" class="grey"></div>
<div id="galery" class="galery" ></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51547796
复制相关文章
相似问题