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 的帮助。