I have an animation that extends down and then to the right to display a grid of images. Given that the .addEventListener(“click”) changes the display to grid, it reveals the content immediately. I want to resolve this in one of two ways:
- Wait for the display: “grid” change to fade-in when the border animation is complete
- As the border grows in size to the right, the pre-populated images are revealed.
Hopefully this quick graphic adds some context:
Here is what I have so far for code
const showButton = document.getElementById("option-button");
const optionsGrid = document.getElementById("option-grid");
const optionRadios = document.getElementsByClassName("option-radio");
const optionOne = document.getElementById("1");
const optionTwo = document.getElementById("2");
const optionThree = document.getElementById("3");
const optionFour = document.getElementById("4");
const optionOneImage = document.getElementById("option-1-image").src;
const optionTwoImage = document.getElementById("option-2-image").src;
const optionThreeImage = document.getElementById("option-3-image").src;
const optionFourImage = document.getElementById("option-4-image").src;
showButton.addEventListener("click", showOptions);
function showOptions() {
let array = [];
for (let i = 0; i < optionRadios.length; i++) {
array.push(optionRadios[i].classList.value);
}
if (array.includes("option-radio hide")) {
optionsGrid.style.animation = "open-animation 500ms linear 1";
optionsGrid.style.display = "grid";
for (let i = 0; i < optionRadios.length; i++) {
optionRadios[i].classList.replace("hide", "active");
}
} else {
optionsGrid.style.display = "none";
for (let i = 0; i < optionRadios.length; i++) {
optionRadios[i].classList.replace("active", "hide");
}
}
}
optionOne.addEventListener("click", function() {
showButton.style.backgroundImage = `url("${optionOneImage}")`;
showButton.innerHTML = "";
optionsGrid.style.display = "none";
for (let i = 0; i < optionRadios.length; i++) {
optionRadios[i].classList.replace("active", "hide");
}
});
optionTwo.addEventListener("click", function() {
showButton.style.backgroundImage = `url("${optionTwoImage}")`;
showButton.innerHTML = "";
optionsGrid.style.display = "none";
for (let i = 0; i < optionRadios.length; i++) {
optionRadios[i].classList.replace("active", "hide");
}
});
optionThree.addEventListener("click", function() {
showButton.style.backgroundImage = `url("${optionThreeImage}")`;
showButton.innerHTML = "";
optionsGrid.style.display = "none";
for (let i = 0; i < optionRadios.length; i++) {
optionRadios[i].classList.replace("active", "hide");
}
});
optionFour.addEventListener("click", function() {
showButton.style.backgroundImage = `url("${optionFourImage}")`;
showButton.innerHTML = "";
optionsGrid.style.display = "none";
for (let i = 0; i < optionRadios.length; i++) {
optionRadios[i].classList.replace("active", "hide");
}
});
.hide {
display: none;
}
.active {
display: block;
}
#option-button {
width: 600px;
height: 200px;
}
#option-grid {
display: none;
grid-template-columns: repeat(2, 1fr);
width: 1250px;
height: 450px;
place-items: center;
border: 5px solid black;
border-radius: 10px;
}
@keyframes open-animation {
0% {
height: 10px;
width: 10px;
}
50% {
height: 450px;
width: 10px;
}
100% {
width: 1250px;
}
}
<fieldset id="console-select">
<legend>Radio Option</legend>
<button type="button" id="option-button">Select</button>
<div id="option-grid">
<div class="option-radio hide">
<label for="1">
<input type="radio" name="option" value="1" id="1" hidden>
<img src="https://placehold.co/600x200" id="option-1-image">
</label>
</div>
<div class="option-radio hide">
<label for="2">
<input type="radio" name="option" value="2" id="2" hidden>
<img src="https://placehold.co/600x199" id="option-2-image">
</label>
</div>
<div class="option-radio hide">
<label for="3">
<input type="radio" name="option" value="3" id="3" hidden>
<img src="https://placehold.co/600x198" id="option-3-image">
</label>
</div>
<div class="option-radio hide">
<label for="4">
<input type="radio" name="option" value="4" id="4" hidden>
<img src="https://placehold.co/600x197" id="option-4-image">
</label>
</div>
</div>
</fieldset>
Here is a link to the CodePen
Thank you for any help!