JSFiddle - React, Tailwind, and code Playground
HTML
<img id="i" onClick="fadeOutById()" src="http://placehold.it/100x100" style="opacity: 1"/>
<img id="e" onClick="fadeOutById()" src="http://placehold.it/100x100" style="opacity: 0"/>
JavaScript
function fadeOutById() {
var e = document.getElementById("i");
var f = function() {
e.style.opacity -= 0.01;
if (e.style.opacity <= 0) return;
requestAnimationFrame (f);
};
requestAnimationFrame (f);
}
function fadeInById(eid) {
var e = document.getElementById(eid);
var v = 0.01;
var f = function() {
v += 0.01;
e.style.opacity = v;
if (e.style.opacity >= 1) return;
requestAnimationFrame (f);
};
requestAnimationFrame (f);
}