JSFiddle - React, Tailwind, and code Playground

by kazu69

HTML

<div id='sample1' class='elem'>sample1</div>

<div id='sample2' class='elem'>sample2</div>

<div id='sample3' class='elem'>sample3</div>

<div id='sample4' class='elem'>sample4</div>

CSS

#sample1,
#sample2,
#sample3,
#sample4 {
    opacity: 0;
    background-color: #f00;
    transition: opacity 3s ease-in;
}

#sample1.tr,
#sample2.tr,
#sample3.tr,
#sample4.tr {
    opacity: 1;
    background-color: #ddd;
}

JavaScript

var forEach = Array.prototype.forEach;
var elems = document.querySelectorAll('.elem');

forEach.call(elems, function(elem, index, array) {
    elem.addEventListener('transitionend', function() {
        var id = this.id,
            len = elems.length,
            index;
 
        if(!this.classList.contains('tr')) return;
        this.classList.remove('tr');
        for(var i = 0; i < len; i++) {
            if(elems[i].id == id) {
                if(i == len - 1) {
                    index = 0;
                 } else {
                    index = i + 1;
                 }
                 break;
             }
        }
 
        elems[index].classList.add('tr');
    });
});

document.querySelector('#sample1').classList.add('tr');