JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button>Animate</button> <button onClick="location.reload();">Refresh example</button>
<div></div>

CSS

body {
  padding: 20px;
}

button {
  padding: 8px 16px;
  margin-bottom: 20px;
}

div {
  height: 50px;
  width: 50px;
  background: red;
  opacity: 0;
  transition: opacity 500ms;
  display: none;
}

.block {
  display: block;
}

.fade-in {
  opacity: 1;
}

JavaScript

$(function() {
  var transitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
	var $div = $('div');
  
  $('button').on('click', function() {
    $div
      .addClass('block')
      .outerWidth(); // Reflow
      
    $div
      .addClass('fade-in')
      .one(transitionEnd, function() {
        alert('Animated');
      });
  });
});