My main question: Why does the property "transition: opacity 1s easy-in" which i set in CSS for my div seem to not be applied when setting opacity to 1 in JS code?
I want the div "imageTextGrid" to transition from 0 opacity to 1 opacity. I set the transition property to 1sectond in the CSS code. I'm changing the opacity to 1 in the JS code. However there seems to be no transition and the opacity seems to instantly change to 1. What should I do differently? Thank you!
My code:
<!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>
