JSFiddle - React, Tailwind, and code Playground
HTML
<div id="next">Test</div>
<div id="value"></div>
CSS
#next {
width:100%;
height:100%;
background-color:red;
display:none;
}
JavaScript
function show() {
document.getElementById('next').style.opacity = (parseFloat(document.getElementById('next').style.opacity) + 0.1);
document.getElementById('value').innerHTML = (document.getElementById('next').style.opacity);
if (document.getElementById('next').style.opacity < 1) {
setTimeout(show, 400);
}
}
function fadeIn() {
document.getElementById('next').style.opacity = 0;
document.getElementById('next').style.display = 'block';
setTimeout(show, 400);
}
fadeIn();