cómo obtener el tamaño final del elemento en una animación basada en javascript

En nuestra página, a menudo usamos la animación basada en javascript para hacer que el elemento se mueva / cambie de tamaño, la mayoría usa setTimeout o setInterval para cambiar la posición o el tamaño del elemento:

Por ejemplo:

function open() {
  var w=parseInt(foo.style.width);
  if(w>=200) clearTimeout(t);
  else{
    foo.style.width = +1+'px';
    t=setTimeout(open,20); // call doMove in 20msec
  }

}

function init() {
  foo = document.getElementById('dv'); // get the "foo" object
  foo.style.width = '0px'; // set its initial position to 0px
  open(); // start animating
}

El código anterior quiere mostrar el div # foo lentamente, pero como puede ver, configuré el ancho máximo del div en 200px para detener la animación.

Pero, ¿qué tal si el tamaño real del div de contenido debería ser superior a 200?

Es decir, no puedo obtener el ancho final del elemento.

Cual es la solucion general?

Aquí está la ejemplo vivo:

preguntado el 06 de noviembre de 11 a las 15:11

PD: si estás en el ámbito global, no llames a un método open porque se romperá cada window.open llama. Por si acaso. (Pero tu no son en el ámbito global, ¿verdad? :]) -

Establezca el tamaño del paso en 1 px si el tamaño es <200 px. De lo contrario, aumente el tamaño del paso o reduzca el paso de tiempo según el ancho final. -

2 Respuestas

Utilice uno de los diversos métodos de cálculo de estilos. Google "JavaScript compute width" y habrá muchos resultados. Prueba la propiedad offsetWidth primero. No recuerdo bien su tabla de compatibilidad, pero definitivamente funciona en Chrome, Safari e IE8 / 9.

respondido 06 nov., 11:19

Utilice el código modificado como se muestra a continuación. Continuará expandiéndose hasta que el elemento haya alcanzado su ancho completo.

function open() { //See comment at OP
    var w = foo.offsetWidht; // offsetWidht NOT style.width
    var realWidth = foo.scrollWidth;
    if(w < 200 || w < realWidth) {
        foo.style.width = +1+'px';
        setTimeout(open, 20); // call doMove in 20msec
    }
}

Además, no necesitas clearTimeout, ya que no se ha establecido ningún tiempo de espera cuando se vuelve a llamar a la función.

respondido 06 nov., 11:19

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.