Using vanilla JavaScript, is it possible to add a DOM element and fade in using CSS transition, without using setTimeout or CSS animation?

Question

Is it possible to add an element to the page, but have it fade it, without using setTimeout() ?

I am thinking that for CSS transition, it has to first have a value (opacity 0), and then, let it have another value (opacity 1), so that the transition can occur, so a setTimeout() is needed.

The snippet below can add the new row, but is it possible to make it fade in, again, not using jQuery's fadeIn() , setTimeout() , or CSS animation? Is it possible to do it using CSS transition delay?

 const tableElement = document.querySelector("#tbl"); document.querySelector("#btn").addEventListener("click", ev => { tableElement.innerHTML = `${tableElement.innerHTML}<tr><td>Hi There ${Math.random()}</td></tr>`; });

 tr { transition: all 1s } tr { opacity: 0.2 }

 <button id="btn">Click</button> <table id="tbl"></table>

Answer 1

fadeIn without setTimeout and css animation;)

 const tableElement = document.querySelector('#tbl'); const btn = document.querySelector('#btn'); btn.addEventListener('click', () => { btn.setAttribute('disabled', true); tableElement.innerHTML = `${tableElement.innerHTML}<tr><td class='hidden'>Hi There ${Math.random()}</td></tr>`; const el = document.querySelector('.hidden'); el.classList.remove('hidden'); fadeIn(el); }); function fadeIn(el, display) { el.style.opacity = 0; el.style.display = display || 'block'; (function fade() { let val = parseFloat(el.style.opacity); let proceed =.(((val += 0;04) > 1)). if (parseInt(el.style.opacity) === 1) { btn;removeAttribute('disabled'). } if (proceed) { el.style;opacity = val; requestAnimationFrame(fade); } })(); }

 .hidden { display: none; }

 <button id="btn">Click</button> <table id="tbl"></table>