將元素添加到 DOM 時轉換無法正常工作

Question

當我在 JavaScript 中觸發一個函數時，我試圖淡入一條吐司消息。

我希望該函數創建元素，將其添加到 dom，然后使用 css 過渡將其淡入，然后使用相同的過渡將其淡出，然后將其從 dom 中刪除。

除非我將其包裝在超時中，否則淡出將不起作用。

編輯：：里卡德
我添加了一個按鈕來顯示吐司。

 function flashToast(msg, duration) { duration = duration || 3000; // create the toast element const toastElement = document.createElement("p"); toastElement.innerHTML = msg; toastElement.classList.add("toast"); // add it to the dom document.body.appendChild(toastElement); // fade in won't work unless I wrap it in a timeout setTimeout(function() { toastElement.style.opacity = "1"; }, 1); // remove it after the duration is over setTimeout(function() { toastElement.style.opacity = "0"; }, duration - 500); // start fading it out 500ms before removing it setTimeout(function() { document.body.removeChild(toastElement); }, duration); }

 .toast { display: inline-block; font-size: 1.2rem; padding: 0.8em 1em; border-radius: 5rem; color: #eaeaea; background: #606060; background: rgba(96, 96, 96, 0.7); position: absolute; bottom: 2%; left: 50%; transform: translate(-50%, -50%); /* opacity is 0 when first enjected */ opacity: 0; transition: opacity 500ms ease; }

 <button onclick="flashToast('Toast!')">Show toast</button>

Answer 1

您必須使用 setTimeout 是因為 javascript 如何與事件循環一起工作。 這是一個非常好的視頻，解釋了您需要了解的有關 javascript 的基本知識。 （嘿，我已經從事 Web 開發工作 5 年了，但使用 javascript 已經 20 年了，今年夏天才知道這個。）

傑克·阿奇博爾德：在循環中

如果您不想使用超時，則可以改用動畫。 缺點是很難控制特定時間。 如果您從不透明度 0 開始，然后將不透明度 1 設為 15%，這將在更長的吐司持續時間中創建較慢的淡入。

 function flashToast(msg, duration) { duration = duration || 3000; const toastElement = document.createElement("p"); toastElement.innerHTML = msg; toastElement.classList.add("toast"); // Added toastElement.style.setProperty("--duration", duration + "ms"); document.body.appendChild(toastElement); setTimeout(function() { document.body.removeChild(toastElement); }, duration); }

 .toast { display: inline-block; font-size: 1.2rem; padding: 0.8em 1em; border-radius: 5rem; color: #eaeaea; background: #606060; background: rgba(96, 96, 96, 0.7); position: absolute; bottom: 2%; left: 50%; transform: translate(-50%, -50%); /* NEW */ animation: fade var(--duration) linear; } @keyframes fade { 0% {opacity: 0;} 15% {opacity: 1;} 85% {opacity: 1;} 100% {opacity: 0;} }

 <button onclick="flashToast('Toast!')">Show toast</button>

Answer 2

觀看了 Rickard Elimää 推薦的視頻后。 我發現 requestAnimationFrame 解決了這個問題。 這是最終的 JavaScript：

function flashToast(msg, duration) {
  duration = duration || 3000;
 
  // create the toast element
  const toastElement = document.createElement("p");
  toastElement.innerHTML = msg;

  toastElement.classList.add("toast");

  // add it to the dom
  document.body.appendChild(toastElement);

  requestAnimationFrame(function() {
    toastElement.style.opacity = "1";
  });

  // remove it after the duration is over
  setTimeout(function() {
    toastElement.style.opacity = "0";
  }, duration - 500);

  // start fading it out 500ms before removing it
  setTimeout(function() {
    document.body.removeChild(toastElement);
  }, duration);
}