JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="box box1"></div>
        <div class="box box2 displayOff opacityOff"></div>
        <div class="box box3 displayOff opacityOff"></div>
        <div class="box box4 displayOff opacityOff"></div>
    </div>
    <button id="next">Next</button>

CSS

.box {
    width: 200px;
    height: 200px;
    border: 2px solid #333;
    opacity: 1;
    transition: opacity 1s linear;
}
.box1 {
    background: blue;
}
.box2 {
    background: red;
}
.box3 {
    background: green;
}
.box4 {
    background: purple;
}

.opacityOff {
    opacity: 0;
}
.displayOff {
    display: none;
}

JavaScript

let boxes = document.querySelectorAll(".box");
let next = document.getElementById("next");

next.addEventListener("click", nextBox);

let now = 0;
function nextBox() {
    if(!boxes[now + 1]) return;
    boxes[now].classList.add("opacityOff");
    boxes[now].addEventListener("transitionend", () => {
        boxes[now].classList.add("displayOff");
        boxes[now+1].classList.remove("displayOff");
        setTimeout(() => {
            boxes[now+1].classList.remove("opacityOff");
            now++;
        }, 0);
    });
}