javascript - CSS 过渡不向后工作

Question

我有一个标准的不透明动画，但它不能以相反的顺序工作。这是 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;
}

Answer 1

将过渡属性从 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>