JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Olá mundo!</h1>

<p>Testa clicar nos botões muitas vezes:</p>
<button id="fadeIn">Fade in</button>
<button id="fadeOut">Fade out</button>

JavaScript

function tween(el, to, speed) {
    if (el._isAnimating) clearInterval(el._tween);
    var opacity = Number(window.getComputedStyle(el).opacity);
    if (to == opacity) return; // não precisa animar
    else el._isAnimating = true;
    el.style.opacity = opacity;
    var incr = 0.03 * (to > opacity ? 1 : -1);

    el._tween = setInterval(function() {
        var next = Number(el.style.opacity) + incr;
        if ((incr > 0 && next > to) || (incr < 0 && next < to)) {
            el.style.opacity = to;
            return clearInterval(el._tween);
        }
        el.style.opacity = next;
    }, speed / 50);

}

//Fuction Fade out
function fadeOut(elem, speed) {
    tween(elem, 0, speed);
}

//Função fade in
function fadeIn(elem, speed) {
    tween(elem, 1, speed);
}

// Exemplo
var h = document.querySelector('h1');
fadeOut(h, 1500);
setTimeout(function() {
    fadeIn(h, 1500);
}, 2000);

function buttonHandler(fn) {
    return function() {
        window[fn](h, 1000);
    }
}
['fadeIn', 'fadeOut'].forEach(function(id) {
    var el = document.getElementById(id);
    el.addEventListener('click', buttonHandler(id));
});