I have developed two animations with distinct classes that should enable and disable fullscreen when a button is pressed, executing the first animation on the initial press and the second animation on subsequent presses of the same button.
CSS Enabling fullscreen through animation and disabling it through reverse animation
#mv {
width: 100%;
height: 57%;
}
.animate {
animation: fullscreen 0.5s;
animation-fill-mode: forwards;
}
@keyframes fullscreen {
from {
height: 57%;
}
to {
height: 100%;
}
}
.animatereverse {
animation: fullscreenreverse 0.5s;
animation-fill-mode: forwards;
}
@keyframes fullscreenreverse {
from {
height: 100%;
}
to {
height: 57%;
}
}
TS/JS I utilized a flag to signal whether the interface is in fullscreen mode or not
var fullscreen = false;
//console.log(" fullscreen now false ");
document.getElementById('fllbtn').addEventListener("click", function () {
if(fullscreen == false){
//console.log(" fullscreen is false ");
fullscreen = true;
//console.log(" fullscreen now true ");
document.getElementById("mv").classList.toggle("animate");
}else{
//console.log(" fullscreen is true ");
fullscreen = false;
//console.log(" fullscreen now false ");
document.getElementById("mv").classList.toggle("animatereverse");
}
})
The issue is described as follows:
BEGIN
*non-fullscreen interface
*I click the fullscreen button
*animation triggers, interface becomes fullscreen
*I click the fullscreen button again
*animation plays, interface returns to non-fullscreen state
*I click the fullscreen button once more
*animation does not trigger, interface remains unchanged
*I click the fullscreen button another time
*animation still does not work, interface stays the same
END
You could view it as a loop, repeating the process twice, transitioning back and forth like this.