JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<div id="a" class="red"></div>

CSS

#a {
    height: 100px;
    width: 100px;
    -webkit-transition: background-color 4s;
    -ms-transition: background-color 4s;
    transition: background-color 4s;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.hidden {
    display: none !important;
}

JavaScript

(function () {
    var ended = false;
    var markEnded = function () {
        ended = true;
    };
    var e = document.getElementById('a');
    e.addEventListener('transitionend', markEnded, false);
    e.addEventListener('webkitTransitionEnd', markEnded, false);
    e.addEventListener('MSTransitionEnd', markEnded, false);
    e.className = 'blue';
    window.setTimeout(function () {
        e.className += ' hidden';
    }, 2000);
    window.setTimeout(function () {
        alert("PASSED?: " + (ended === false));
    }, 4500);
})();