JSFiddle - React, Tailwind, and code Playground
HTML
<p id="hallo">Hallo Welt</p>
<button id="button">Starte Animation</button>
CSS
#hallo { opacity: 0; }
JavaScript
function fadeIn (id) {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.setTimeout;
var element = document.getElementById(id);
function step (value) {
console.log('step', value);
if (value >= 1) return;
value += 0.01;
element.style.opacity = value;
requestAnimationFrame(function () {
step(value);
}, 10);
}
step(0);
}
document.getElementById('button').onclick = function () {
fadeIn('hallo');
};