pagina - no cache javascript

Forzar navegador para desencadenar reflujo mientras se cambia CSS

Question

Estoy creando un control deslizante de imagen no jQuery sensible basado en transiciones CSS3.

La estructura es simple: una vista y dentro de UL relativamente posicionados con LI flotantes a la izquierda.

Estoy enfrentando un problema en tal situación:

1. El usuario hace clic en la flecha "prev".
2. JS agrega la LI correcta antes del nodo LI actualmente mostrado.
3. Por ahora, UL ha establecido la transición CSS como none 0s linear para evitar cambios de animación. En este momento, reduzco el valor izquierdo de UL CSS por el ancho del control deslizante (digamos: de 0px a -1200px) para hacer que la vista sea la misma que era.
4. Ahora estoy cambiando la propiedad de transición de UL a all 0.2s ease-out .
5. Ahora estoy cambiando la propiedad izquierda de UL para activar la animación CSS3. (digamos: de -1200px a 0px).

¿Cuál es el problema? El navegador simplifica los cambios y no realiza animaciones.

Stoyan Stefanov escribió sobre el problema del reflujo en su blog here , pero en este caso, tratar de forzar un reflujo en el elemento no funciona.

Este es un fragmento de código que hace esto (omití los prefijos del navegador para simplificar):

ul.style.transition = ''none 0s linear 0s''; ul.style.left = ''-600px''; ul.style.transition = ''all 0.2s ease-out''; ul.style.left = ''0px'';

Aquí está el violín para ver el problema en acción: http://jsfiddle.net/9WX5b/1/

Answer 1

Solicitar el offsetHeight de un elemento hace todo muy bien. Puede forzar un reflujo utilizando esta función y pasándole el elemento en el que se han cambiado los estilos:

function reflow(elt){
    console.log(elt.offsetHeight);
}

Y llama a esto donde se necesitan los reflujos. Vea este ejemplo: http://jsfiddle.net/9WX5b/2/

EDITAR: recientemente se necesitaba hacer esto, y se preguntaba si había una mejor manera que consolarlo. No puede simplemente escribir elt.offsetHeight como su propia declaración, ya que el optimizador (Chrome''s, al menos) no activará un reflujo porque solo está accediendo a una propiedad sin conjunto de captadores, sin necesidad de evaluarla. Entonces, AFAIK, la forma más barata de hacerlo es void(elt.offsetHeight) , ya que no sabe con certeza si void tiene efectos secundarios o no. (Podría ser anulado o algo así, idk).

Answer 2

function reflow( element ) {
    if ( element === undefined ) {
        element = document.documentElement;
    }
    void( element.offsetHeight );
}

Funciona bien con Chrome y FF, y parece ser la forma más sencilla y portátil de hacerlo en ATM.