CSS 过渡不向后工作

Question

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;
}

Answer 1

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>