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

Question

是否可以在不使用setTimeout()的情況下向頁面添加元素，但讓它淡化？

我在想，對於 CSS 過渡，它必須首先有一個值（不透明度 0），然后讓它有另一個值（不透明度 1），這樣才能發生過渡，所以需要一個setTimeout() 。

下面的代碼片段可以添加新行，但是否可以再次使其淡入，而不使用 jQuery 的fadeIn() 、 setTimeout()或 CSS animation？ 是否可以使用 CSS 轉換延遲來做到這一點？

 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

不帶 setTimeout 和 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>