Question

我有一个标准的不透明度动画，但是它不能以相反的顺序工作。这是JSFiddle link。如果我正确理解了文档，它应该会自动运行。我是JS的初学者，所以这是JavaScript的问题吗？还是CSS动画是错误的？

HTML：

{% load static %}

JS：

<div id="bg_layer" class="bg_layer"></div>
<div id="clicker" class="grey"></div>
<div id="galery" class="galery" ></div>

CSS：

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

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>

CSS过渡不会向后工作

1 个答案: