JSFiddle - React, Tailwind, and code Playground

by Chan Wu

HTML

<button id="btn">fade out</button>
<img src="http://www.cognitivebusiness.com.tw/ibmstorageheroes/images/cartoon1/p2.png">

Babel + JSX

let img = document.querySelector('img');
let btn = document.getElementById('btn');
let duration = 30;

btn.addEventListener('click', function(e) {
    let counter = 1;
	let interval = setInterval(function() {
    	counter -= 0.1;
        
		if (counter > 0) {
        	img.style.opacity = counter;
        } else {
            clearInterval(interval);
        }
    }, duration);

    return false;
});