Saltar al contenido

“Forzar reflujo” en las transiciones CSS en Bootstrap

Solución:

Una respuesta un poco tardía, pero estoy abordando algunos problemas con las transiciones CSS que creo que se relacionan con este fragmento de código que has encontrado, ¡y espero que te ayuden a entenderlo!

Básicamente, estoy alternando una clase de Javascript / jQuery que agrega transiciones css a un elemento dom. A continuación, se actualiza el CSS de este elemento, lo que provoca que se produzca la transición. A continuación, se muestra una versión simplificada del código:

var myelement = $("myselector");

// Set z-indexes before the transition
myelement.css("z-index", 1); 

var reflow = root.offset().left; // Re-flow the page

// Set the transition class on the element which will animate
myelement.addClass("trans");
myelement.css("width", 0 + "px"); // Animate to nothing

Entonces, si elimino el comentario de mi línea de reflujo, se producirá mi transición, pero a veces (parece más frecuente en safari) el índice z de mi elemento no se habrá actualizado.

Para mí, parece que en ciertas situaciones, los estilos escritos en el dom se almacenan en búfer en algún lugar y no se vacían.

Ahí es donde entra la llamada al desplazamiento izquierdo. Esta es una de las propiedades que se dice que provocan un reflujo en la página. Obviamente, esto suele ser algo malo en cuanto al rendimiento, pero parece necesario para evitar que las transiciones de CSS recojan los valores incorrectos.

Hay un error interesante de Mozilla alojado que trata el mismo tema. Puede ser de algún interés. Sugieren la adición de una API para iniciar correctamente las transiciones desde el código.

Esta es también una publicación de SO interesante sobre forzar reflujos.

¡Espero que esto ayude! 🙂

Recomendaría una forma menos pirateada y más formal de forzar un reflujo: use forceDOMReflowJS. En su caso, su código se vería de la siguiente manera.

forceReflowJS(that.$element[0]);
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *