JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block block-fade"></div>
<button class="my_butt" type="button">animate me!</button>

CSS

.block {
    width: 200px;
    height: 200px;
    background: purple;
}
.block-fade {
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
.block-fade.in {
    opacity: 1;
}

JavaScript

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");

    $(".block").on("transitionend.my MSTransitionEnd.my webkitTransitionEnd.my oTransitionEnd.my", function (e) {
        var el = $(this);
        el.off('.my');
        setTimeout(function () {
            el.removeClass("in");
        }, 3000);
    });
});