JSFiddle - React, Tailwind, and code Playground

HTML

<button class="test">Test</button>
<br/><br/>
<div id="engine">a</div>

CSS

#engine {
  background-color: red;
  display: none;
  height: 100px;
  opacity: 0;
  width: 100px;
}
#engine.active {
  display: block;
}
#engine.animate {
  opacity: 1;
  transition: opacity 1s linear;
}

JavaScript

$('.test').on('click', function() {
  $('#engine').addClass('active').delay(10).queue(function() {
    $(this).addClass('animate');
    $(this).dequeue();
  })
})