JS：如何在 insertBefore() 之后得到通知？
JS : How to get notified after insertBefore()?
有没有办法在使用 insertBefore() 将元素插入 DOM 后，当该元素实际上变成 visible/available 给用户时得到通知？特别是要开始对其应用 CSS 转换 ?
完成问题
如果这个问题反复出现，请原谅我，到目前为止我没有找到合适的答案。我正在尝试在我自己的网站上实现一个自定义弹出对话框系统，类似于 SweetAlert 或其他一些产品。
我想在出现此弹出窗口时应用一些特殊效果，例如背景逐渐变暗，以及框本身的缓慢垂直运动。
为了实现所有这些，我生成了一个大的、固定的 div 元素，覆盖整个屏幕（背景）并包含弹出框。当我需要它时，我首先将这个元素作为 body 的第一个子元素插入，并用特殊的 invisible class 标记它。插入后，我从元素中删除 invisible class 并让 CSS 规则发挥作用。
问题是，即使在插入这个元素后删除class，这个也只会在Javascript函数离开时渲染，因此直接处于最终状态。
在完整的初始页面上执行此操作时，load 事件会有所帮助。我现在想在现有页面上做同样的事情。
一如既往，我对这个（可能是 XY）问题的两种解决方案都很感兴趣：如果有更好的方法，我会很高兴发现它，但我仍然有兴趣解决这个问题无论如何特殊情况。
在此先感谢大家。
编辑：当前在 Firefox 82.0.2 上执行测试
感谢上面的评论，这里有一个有效解决两个暴露问题的方法：
- "Mutation Observer", as well as former "Mutation Events"（现已弃用）是插入内容时获得通知的最佳方式。不过，它对动画问题没有帮助，因为此时仍不能保证渲染它；
- 与其先应用 class 再应用另一个来执行过渡，不如使用 @keyframes 定义一个只播放一次的常规动画。根据定义，它保证在对象出现时播放。
非常感谢“Pomax”、F4st3r 和 epascarello 的帮助。
有没有办法在使用 insertBefore() 将元素插入 DOM 后，当该元素实际上变成 visible/available 给用户时得到通知？特别是要开始对其应用 CSS 转换 ?
完成问题
如果这个问题反复出现，请原谅我，到目前为止我没有找到合适的答案。我正在尝试在我自己的网站上实现一个自定义弹出对话框系统，类似于 SweetAlert 或其他一些产品。
我想在出现此弹出窗口时应用一些特殊效果，例如背景逐渐变暗，以及框本身的缓慢垂直运动。
为了实现所有这些，我生成了一个大的、固定的 div 元素，覆盖整个屏幕（背景）并包含弹出框。当我需要它时，我首先将这个元素作为 body 的第一个子元素插入，并用特殊的 invisible class 标记它。插入后，我从元素中删除 invisible class 并让 CSS 规则发挥作用。
问题是，即使在插入这个元素后删除class，这个也只会在Javascript函数离开时渲染，因此直接处于最终状态。
在完整的初始页面上执行此操作时，load 事件会有所帮助。我现在想在现有页面上做同样的事情。
一如既往，我对这个（可能是 XY）问题的两种解决方案都很感兴趣：如果有更好的方法，我会很高兴发现它，但我仍然有兴趣解决这个问题无论如何特殊情况。
在此先感谢大家。
编辑：当前在 Firefox 82.0.2 上执行测试
感谢上面的评论，这里有一个有效解决两个暴露问题的方法：
- "Mutation Observer", as well as former "Mutation Events"（现已弃用）是插入内容时获得通知的最佳方式。不过，它对动画问题没有帮助，因为此时仍不能保证渲染它；
- 与其先应用 class 再应用另一个来执行过渡，不如使用 @keyframes 定义一个只播放一次的常规动画。根据定义，它保证在对象出现时播放。
非常感谢“Pomax”、F4st3r 和 epascarello 的帮助。