The 1st exit button (.exitA
) fades in without an issue.
The 2nd exit button (.exitB
) should fade in after the curtain goes up.
It does not.
How do I fix this?
https://jsfiddle.net/8c4e129f/
.exitA,
.exitB {
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 0s;
pointer-events: none;
}
.exitA.visible,
.exitB.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
function showExit(containerSelector, exitSelector) {
const container = document.querySelector(containerSelector);
const closeButton = document.querySelector(exitSelector);
container.classList.remove("hide");
container.classList.add("slide");
container.addEventListener("transitionend", function() {
closeButton.classList.add("visible");
});
}
function removePlayer() {
videoPlayer.destroyPlayers();
}
function resetPage() {
hideContainer(".video-containerA");
// showContainer(".video-containerB");
showExit(".video-containerB",".exitB");
removePlayer();
}