我希望 div“imageTextGrid”从 0 不透明度过渡到 1 不透明度。 我在 CSS 代码中将过渡属性设置为 1sectond。我在 JS 代码中将不透明度更改为 1。但是似乎没有过渡，不透明度似乎立即变为 1。我做错了什么？谢谢！
我的代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<style>
/* CSS styles */
/* The modal (background) */
#imageTextGrid{
/* general styling */
padding-top: 80px;
max-width:95vw;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap:40px;
/* slide in+opacity animation */
opacity: 0;
position: relative;
margin: auto;
transition: opacity 1s ease-in;
}
</style>
</head>
<body>
<div id="imageTextGrid" name="overview" >
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a> <a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
</div>
</body>
<script>
const imageTextGrid = document.getElementById("imageTextGrid");
//slide in animation (imageTextGrid)
// imageTextGrid.style.animation = "none";
imageTextGrid.style.opacity = "1";
setTimeout(() => {
imageTextGrid.style.animation = null; // remove the inline animation style
}, 500); // duration of animation in milliseconds
//open relevant popup when image is clicked
imageTextGrid.addEventListener("click", (event)=>{
console.log(event.target.className); //logs classname of image; use classname of image as argument for function which shows popup related to image
event.preventDefault();
const element = document.querySelector("#" + event.target.className);
element.style.display = "block";
element.style.opacity = 1;
//close popup when user clicks outside of image
element.addEventListener("click", function(event) {
if (event.target === element) {
element.style.opacity = 0;
setTimeout(function() {
element.style.display = "none";
}, 500);
}
});
});
</script>
</html>