Estoy trabajando en una biblioteca de animación, donde el usuario puede ingresar algunos cambios de estilo y se animarán. Esto sucede principalmente a través de la técnica de animación FLIP, donde necesito las dimensiones del elemento antes y después de un cierto cambio de estilo/clase (puede leer más sobre esto en css-tricks ).

PERO falla cuando el cambio de estilo resultante hace que el elemento tenga una altura o un ancho de 0. Sería bueno saber eso de antemano, así que me preguntaba: ¿hay alguna forma de "vista previa" de un cambio de estilo/clase realizado en un DOM? elemento antes de aplicarlos realmente?

Actualmente lo estoy haciendo así:

• obtener la dimensión a través getClientBoundingRect()
• agregar el estilo del usuario al elemento
• lee las dimensiones de nuevo
• eliminar los cambios de estilo para que volvamos a la normalidad

Esto está funcionando bien y está sucediendo tan rápido que no puedes verlo, pero no sé a) cuántos elementos necesito para leer así y b) tampoco sé cuántos pasos de cambio de estilo hay ( piense como from: style abc to to: style xyz que podría implicar 2 posibilidades para una altura/anchura resultante de 0).

Ya estoy viendo algunas caídas de fotogramas porque están ocurriendo al menos 4 repintados y no sé si el navegador puede seguir agrupando estos por lotes si hay aún más elementos/pasos de cambio y/o el dispositivo no tiene ese rendimiento.

Estaba pensando en copiar los elementos afectados y agregarlos al DOM (en algún lugar oculto), pero dado que los elementos principales (y abuelos) podrían afectar el diseño, básicamente necesitaría copiar y montar todo el árbol de elementos, que podría ser enorme. ..

¿Algunas ideas?