【发布时间】：2021-12-12 04:15:32
【问题描述】：
在使用insertBefore() 将元素插入 DOM 后，当该元素对用户真正可见/可用时，是否有办法获得通知？尤其是开始对其应用 CSS 转换？
完整的问题
如果这个问题反复出现，请原谅我，到目前为止我还没有找到合适的答案。我正在尝试在自己的网站上实现自定义弹出对话框系统，类似于 SweetAlert 或其他一些产品。
我想在此弹出窗口出现时应用一些特殊效果，例如背景逐渐变暗，以及框本身的缓慢垂直运动。
为了实现这一切，我生成了一个大的、固定的div 元素，覆盖整个屏幕（背景）并包含弹出框。当我需要它时，我首先将这个元素作为body 的第一个子元素插入，并用一个特殊的invisible 类对其进行标记。插入后，我从元素中删除这个 invisible 类，让 CSS 规则发挥作用。
问题是即使在插入这个元素之后移除了这个类，这个只有在Javascript函数离开时才会呈现，因此直接处于它的最终状态。
在完整的初始页面上执行此操作时，load 事件会有所帮助。我现在想在现有页面上做同样的事情。
与往常一样，我对这个（可能是 XY）问题的两种解决方案都很感兴趣：如果有更好的方法，我会很高兴发现它，但我仍然有兴趣解决这个特殊情况无论如何。
提前感谢大家。
编辑：目前在 Firefox 82.0.2 上执行测试
【问题讨论】：
-
听起来您可能想看看MutationObserver 方法。
-
听起来你需要在删除类时稍微延迟一下。
-
@epascarello ：这实际上是我作为“临时解决方法”所做的，但我想做得更好;-)
-
你在使用
transition吗？如果是这种情况，可能需要使用关键帧。
标签： javascript dom events