JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="fadingSquare"></div>
</body>

CSS

.fadingSquare {
    width: 200px;
    height: 200px;
    background: #F00;
    opacity: 0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
}

.fadingSquare.active {
    opacity: 1;
}

JavaScript

(function () {
    "use strict";

    var isVisible = false;

    function handleClick() {

        var fadingSquare = document.querySelector(".fadingSquare"),
            i;

        if (isVisible === false) {
            fadingSquare.className = 
                fadingSquare.className + " active";

            // Do something intensive in JavaScript for a while
            setTimeout(function () {
                for(i = 0; i < 10000; i += 1) {
                    console.log(i);
                }
            // Make sure it occurs midway through the CSS transition
            }, 200); 

            isVisible = true;
        } else {
            fadingSquare.className =
                fadingSquare.className.replace("active", "");
            isVisible = false;
        }
    }

    document.addEventListener("click", handleClick, false);
}());