有沒有辦法在使用 將元素插入 DOM 后insertBefore()，當該元素對用戶實際可見/可用時獲得通知？尤其是要開始對其應用 CSS 轉換？
完整的問題
如果這個問題反復出現，請原諒我，到目前為止我還沒有找到合適的答案。我正在嘗試在我自己的網站上實作自定義彈出對話框系統，類似于 SweetAlert 或其他一些產品。
當這個彈出視窗出現時，我想應用一些特殊效果，例如背景逐漸變暗，以及盒子本身的緩慢垂直運動。
為了實作所有這一切，我生成了一個div覆寫整個螢屏（背景）并包含彈出框的大型固定元素。當我需要它時，我首先將這個元素作為body的第一個子元素插入，并用一個特殊的invisible類來標記它。插入后，我invisible從元素中洗掉這個類，讓 CSS 規則發揮作用。
問題是，即使在插入這個元素后洗掉了這個類，這個類也只會在 Javascript 函式離開時呈現，因此直接處于其最終狀態。
在完整的初始頁面上執行此操作時，load事件會有所幫助。我現在想在現有頁面上做同樣的事情。
與往常一樣，我對這個（可能是 XY）問題的兩種解決方案都感興趣：如果有更好的方法來做，我會很高興發現它，但無論如何我仍然對解決這種特殊情況感興趣。
在此先感謝大家。
編輯：目前正在 Firefox 82.0.2 上執行測驗
uj5u.com熱心網友回復：
感謝上面的評論，這是兩個暴露問題的有效解決方案：
- “ Mutation Observer ”以及以前的“ Mutation Events ”（現已棄用）是在插入某些內容時獲得通知的最佳方式。但是，它對影片問題沒有幫助，因為此時仍不能保證它會被渲染；
- 與其應用一個類然后另一個類來執行過渡，不如使用只播放一次的@keyframes定義一個常規影片。根據定義，它保證在物件出現時播放。
非常感謝“Pomax”、F4st3r 和 epascarello 的幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/346172.html
標籤：javascript dom 事件