I have I have a standard opacity animation, but it doesn't work in reverse order. Here is JSFiddle link . If I understood the documentation correctly it should work automatically. I am beginner in js so is this a problem in javascript? Or CSS animation is wrong?
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;
}
Change the transition property from transition: opacity 0.5s ease-in-out
to transition: all 0.5s ease-in-out
so any style properties being changed will start the transition.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.