JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<script>

function foo() {

}
var index=1
arr = ["JAN", "FEB", "MAR", "APR","MAY", "JUN", "JULY"]
function l1(event)
{
		//alert("test")
    m1.innerHTML =arr[index++]; 
    m1.style.opacity="1";
    m1.removeEventListener("transitionend",l1 );
}

function l2(event)
{
		//alert("test")
    m2.innerHTML =arr[index++]; 
    m2.style.opacity="1";
    m2.removeEventListener("transitionend",l1 );
}
foo.prototype.prevHandler = function () 
{
	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", this.returnListener(month) );
    
    //month.classList.add("s1");
     //month.textContent = arr[index++];
    month.style.opacity="0";
    month.getClientRects();
		//month.classList.remove("s1");
    

  //  month.classList.remove("s1");
    //    month.classList.add("s2");

    //month.getClientRects();

  //  monthLinkComp.style.opacity="0";
   }
  /*
  
  m1.addEventListener("transitionend",l1 , false);
  
      
  m1.style.opacity="0";
  
  var m2 = document.getElementById("m1");
  
  m2.addEventListener("transitionend",l2 , false);
  
      
  m2.style.opacity="0";
  
  m2.getClientRects();
  */  
      
   //   m1.style.opacity=".9";
 // m1.style.opacity=".9";


}
foo.prototype.test = function(event){

}
foo.prototype.returnListener =  function (month)
{
return function(event) {
          month.textContent = arr[index++];
          month.style.opacity="1";
 					month.removeEventListener("transitionend", arguments.callee);
    };
}
var f1 = new foo();
</script>

<button id = "b1" onclick="f1.prevHandler()" > 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;
}