JSFiddle - React, Tailwind, and code Playground
HTML
<div id="box"></div>
CSS
#box {
width: 150px;
height: 150px;
border: solid 1px #000;
background-color: green;
}
JavaScript
var box = document.getElementById('box');
box.onclick = function () {
fadeOut(this);
}
function fadeOut (e, speed) {
if (!e) { return; }
if (speed) { speed = speed.toLowerCase(); }
var ie = (typeof e.style.opacity === undefined ? true : false),
attr = (ie ? 'filter' : 'opacity'),
n = e.style[attr] = 1,
step = { slow: 300, normal: 100, fast: 50 },
speed = step[speed] || 100,
timer;
timer = setInterval(function () {
if (n <= 0.0) {
clearInterval(timer);
e.style.display = 'none';
return;
}
n = (n - 1/speed).toFixed(3);
if (!ie) {
e.style[attr] = n;
} else {
e.style[attr] = 'alpha(opacity=' + n + ')';
}
}, 1);
}