¿Hay alguna forma de recibir una notificación, después de insertar un elemento en el DOM con insertBefore() , cuando este elemento se vuelve realmente visible/disponible para el usuario? ¿Especialmente para comenzar a aplicar transformaciones CSS en él?
Perdóneme si esta pregunta es recurrente, no encontré una respuesta adecuada hasta ahora. Estoy tratando de implementar un sistema de diálogo emergente personalizado en un sitio web propio, similar a SweetAlert o algunos otros productos.
Me gustaría aplicar algunos efectos especiales cuando aparezca esta ventana emergente, como un oscurecimiento progresivo del fondo, así como un movimiento vertical lento en el cuadro mismo.
Para lograr todo esto, genero un gran elemento div fijo que cubre toda la pantalla (el fondo) y contiene el cuadro emergente. Cuando lo necesito, primero inserto este elemento como el primer elemento secundario de body , etiquetándolo con una clase invisible especial. Una vez insertada, elimino esta clase invisible del elemento y dejo que las reglas CSS hagan la magia.
El problema es que incluso si se elimina la clase después de haber insertado este elemento, este se representará solo cuando la función de Javascript se vaya, por lo tanto, directamente en su estado final.
Al hacer esto en una página inicial completa, el evento de load ayuda. Ahora me gustaría hacer lo mismo en una página existente.
Como siempre, estoy interesado en ambas soluciones a este problema (potencialmente XY): si hay una mejor manera de hacerlo, estaré feliz de descubrirla, pero de todos modos estoy interesado en resolver esta situación en particular.
Gracias de antemano a todos.
EDITAR: actualmente realizando pruebas en Firefox 82.0.2
Gracias a los comentarios anteriores, aquí hay una solución válida para ambos problemas expuestos:
Muchas gracias a "Pomax", F4st3r y epascarello por su ayuda.