JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<div id="someElement">bla</div>

CSS

#someElement {
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

var timeElapsed=0;
var opacity;
var opacity2=1;
function fade(element,type,element2)
{
    if(timeElapsed==0)
        type=='out' ? opacity=1 : opacity=0;
    if(type=='in') opacity+=.01;
    else if(type=='out') opacity-=.01;
    else { opacity+=.01; opacity2-=.01; }
    element.style.opacity=parseFloat((opacity+'').substr(0,4));
    if(element2) element2.style.opacity=parseFloat((opacity2+'').substr(0,4));
    timeElapsed++;
    timeElapsed==100 ? timeElapsed=0 : setTimeout(function(){ fade(element,type,element2) },1);
}

fade(document.getElementById('someElement'),'out');