JSFiddle - React, Tailwind, and code Playground

HTML

<a class="foo" href="#">hello </a>
<a class="foo" href="#"> world</a>

CSS

.foo {
    padding: 25px 50px;
    background: #9c3;
    border: 6px dotted orange;
    opacity: 0.8;
    transition-property: opacity;
    transition-duration: 6s;
}

.foo.hide {
    opacity: 0;
}

JavaScript

$(".foo").click(function(evt) { 
    $(".foo").addClass("hide");
    //setTimeout(function() {
        $(".foo").eq(0).removeClass("hide")
    //}, 0);
});

$(".foo").on("transitionend", function(evt) {
    console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000);
});