JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<script>
var index=1
arr = ["JAN", "FEB", "MAR", "APR","MAY", "JUN", "JULY"]

function navHandler() 
{
	var m1 = document.getElementById("m1");
  
  var months = document.getElementsByClassName("trans");
 // var index=1;
  for(var count = 0;count < 2;count++) {
   	var month = months[count];
    
    month.addEventListener("transitionend", function(event) {
          this.month.textContent = arr[index++];
         // month.style.opacity="1";
         	this.month.classList.remove("s1");
 				//	month.removeEventListener("transitionend", arguments.callee);
    });
    
    //month.style.opacity="0";
    month.classList.add("s1");
    
   }
 
}
</script>

<button id = "b1" onclick="navHandler()" > prev</button>
<div id="m1" class="trans">
   Jan
</div>

<div id="m2" class="trans">
   Feb
</div>

CSS

.trans {
  transition : opacity .4s;
  opacity: 1;
}

.s1{
  opacity : 0;
}

.s2
{
  opacity:1;
}