My goal is to have the blue square fade in on the first button click, then fade out while the red square fades in on the second click.
Unfortunately, it seems that my current code is not achieving this effect. I'm open to any suggestions or help on how to correct this issue.
var currentscene = 0;
function next() {
currentscene++;
if (currentscene === 1) {
var element = document.getElementById("blue");
element.classList.add("fade-in");
}
if (currentscene === 2) {
var elementBlue = document.getElementById("blue");
elementBlue.classList.remove("fade-in");
elementBlue.classList.add("fade-out");
var elementRed = document.getElementById("red");
elementRed.classList.add("fade-in");
}
}.squareblue {
height: 50px;
width: 50px;
top: 50px;
background-color: blue;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.squarered {
height: 50px;
width: 50px;
top: 100px;
background-color: red;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.fade-out {
animation: fadeOut ease 2s
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade-in {
animation: fadeIn ease 2s
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div id="blue" class="squareblue"></div>
<div id="red" class="squarered"></div>
<button class="button" onclick="next()">next</button>