JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="test">test</div>
<div id="log"></div>

JavaScript

function log(x) {
    var args = Array.prototype.slice.call(arguments, 0);
    var o = document.getElementById("log");
    var div = document.createElement("div");
    div.innerHTML = args.join(", ");
    o.appendChild(div);
}

function opacZero(object){
    var newOpacity = object.style.opacity - 0.2;
    if (newOpacity < 0.2) {
        newOpacity = 0;
    }
    object.style.opacity = newOpacity;
    log(newOpacity, object.style.opacity);
    if (newOpacity !== 0) {
        setTimeout(function(){opacZero(object)}, 40);
    }
}
var test = document.getElementById( 'test' );
test.style.opacity = 1;
opacZero( test );