JSFiddle - React, Tailwind, and code Playground

by matku

HTML

<div id="cointainer"></div>
<button id="add"> add </button>

CSS

.hidden{
    opacity:0;
}
label{
   opacity:1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

JavaScript

$("#add").click(function (){
   var element = "<label class='myElement hidden'> fffff </label>"
   $("#cointainer").append(element);
    
    $(".myElement").delay(50).queue( function(){
           $(this).removeClass("hidden");
    });
});