JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<div class="invisible"></div>
<button>Click</button>

CSS

div {
    opacity: .5;
    background: black;
    width: 300px;
    height: 300px;
    position: relative;
    -webkit-transform: translate(0,0);
    -webkit-transition: opacity 0 linear 0;
    -moz-transition: opacity 0 linear 0;
    -o-transition: opacity 0 linear 0;
    transition: opacity 0 linear 0;
}

.invisible {
    opacity: 0;
    -webkit-transition: opacity 500ms linear 1s;
    -moz-transition: opacity 500ms linear 1s;
    -o-transition: opacity 500ms linear 1s;
    transition: opacity 500ms linear 1s;
}

JavaScript

$("button").on("touchend", function(e) {
    $("div").removeClass("invisible");
    setTimeout(function() {
        $("div").addClass("invisible");
    }, 2000)
});