JSFiddle - React, Tailwind, and code Playground

by danbeam

HTML

<div></div>

CSS

div {
  -webkit-transition: opacity 100ms;
  background: red;
  height: 100px;
  width: 100px;
}

div.hiding {
  opacity: 0;
}

div.showing {
  opacity: 1;
}

JavaScript

var d = document.querySelector('div');
d.classList.add('hiding');
d.addEventListener('webkitTransitionEnd', function() {
  d.classList.remove('hiding');
});