JS：如何在 insertBefore() 之后得到通知？

Question

在使用insertBefore()將元素插入 DOM 后，當該元素對用戶實際可見/可用時，有沒有辦法得到通知？ 尤其是要開始對其應用 CSS 轉換？

完整的問題

如果這個問題反復出現，請原諒我，到目前為止我還沒有找到合適的答案。 我正在嘗試在我自己的網站上實現自定義彈出對話框系統，類似於 SweetAlert 或其他一些產品。

當這個彈出窗口出現時，我想應用一些特殊效果，例如背景逐漸變暗，以及盒子本身的緩慢垂直運動。

為了實現這一切，我生成了一個大的、固定的div元素，覆蓋整個屏幕（背景）並包含彈出框。 當我需要它時，我首先將這個元素作為body的第一個子元素插入，並用一個特殊的invisible類標記它。 插入后，我從元素中刪除這個invisible類，讓 CSS 規則發揮作用。

問題是，即使在插入這個元素后刪除了這個類，這個類也只會在 Javascript 函數離開時呈現，因此直接處於其最終狀態。

在完整的初始頁面上執行此操作時， load事件會有所幫助。 我現在想在現有頁面上做同樣的事情。

與往常一樣，我對這個（可能是 XY）問題的兩種解決方案都感興趣：如果有更好的方法，我會很高興發現它，但無論如何我仍然對解決這種特殊情況感興趣。

在此先感謝大家。

編輯：目前正在 Firefox 82.0.2 上執行測試

Answer 1

感謝上面的評論，這是兩個暴露問題的有效解決方案：

• “ Mutation Observer ”以及以前的“ Mutation Events ”（現已棄用）是在插入某些內容時獲得通知的最佳方式。 但是，它對動畫問題沒有幫助，因為此時仍不能保證它會被渲染；
• 與其應用一個類然后另一個類來執行過渡，不如使用只播放一次的@keyframes定義一個常規動畫。 根據定義，它保證在對象出現時播放。

非常感謝“Pomax”、F4st3r 和 epascarello 的幫助。