JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block block-fade">
</div>
<button class="my_butt" type="button">animate me!</button>

CSS

.block
{
    width: 200px;
    height: 200px;
    background: purple;
}

.block-fade
{
      opacity: 0;
  -webkit-transition: opacity 0.5s linear;
     -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
          transition: opacity 0.5s linear;
}

.block-fade.in
{
    opacity: 1;
}

JavaScript

$(".my_butt").on( "click", 
                  function( e )
                  {
                      $(".block").addClass( "in" );
                      
                      $(".block").one( "transitionend MSTransitionEnd webkitTransitionEnd       oTransitionEnd", function( e ) {
                          setTimeout( function() {
                          $(".block").removeClass("in");
                          }, 3000 );
                      });
                  });