Transiciones de CSS3 a elementos creados dinámicamente

Estoy intentando animar un elemento html creado dinámicamente con transiciones CSS3.Transiciones de CSS3 a elementos creados dinámicamente

Quiero que la animación comience justo antes de que se cree el elemento.
Para estos puedo crear una clase que establece la posición original del elemento y luego ajustar la posición de destino por el jQuery css() método

Pero el nuevo elemento que sólo apears en la posición de destino sin transición .

Si uso un setTimeout de 0ms para establecer el nuevo valor CSS, funciona.

¿Hay algo que estoy haciendo mal? o es una limitación? No creo que deba usar la solución setTimeout.

Gracias!

ACTUALIZACIÓN: Aquí hay un enlace con el código que se ejecuta en jsfiddle.net para que usted pueda experimentar. http://jsfiddle.net/blackjid/s9zSH/

ACTUALIZACIÓN He actualizado el ejemplo con la solución en la respuesta.
http://jsfiddle.net/s9zSH/52/

Aquí es un ejemplo de código completamente de trabajo

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
     <script type="text/javascript"> 

     //Bind click event to the button to duplicate the element 
     $(".duplicate").live("click", function (e){ 
      var $to = $("#original .square").clone() 
      $("body").append($to); 
      if($(e.target).hasClass("timeout")) 
       //With setTimeout it work 
       setTimeout(function() { 
        $to.css("left", 200 + "px"); 
       },0); 
      else if($(e.target).hasClass("notimeout")) 
       // These way it doesn't work 
       $to.css("left", 200 + "px"); 
     }); 

     </script> 
     <style type="text/css"> 
     .animate{ 
      -webkit-transition: all 1s ease-in; 
     } 
     .square{ 
      width:50px; 
      height:50px; 
      background:red; 
      position:relative; 
      left:5px; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="original"> 
      <div class="square animate"></div> 
     </div> 

     <button class="duplicate timeout">duplicate with setTimeout</button> 
     <button class="duplicate notimeout">duplicate without setTimeout</button> 
    </body> 
</html>

Fuente

2010-10-19 blackjid

No es necesario utilizar un tiempo de espera. El tiempo de espera funciona porque la página se reajusta entre los estilos de configuración. Reflow recalcula los estilos. Si no recalcula los estilos, el segundo estilo simplemente sobrescribe el primero. Ese es el verdadero problema.

Más bien, puede simplemente:

obj.className = style1; 
window.getComputedStyle(obj).getPropertyValue("top"); 
obj.className = style2;

Si desea animar varios objetos, sólo es necesario que la "bomba" estilo de la calculadora una vez:

obj.className = style1; 
obj2.className = style1; 
obj3.className = style1; 
window.getComputedStyle(obj).getPropertyValue("top"); 

obj.className = style2; 
obj2.className = style2; 
obj3.className = style2;

Probado en chrome12 en mac

Fuente

2011-08-02 20:38:27 mmaclaurin

addéndum: aunque no tiene que usar el tiempo de espera, a veces puede ser bueno. realmente depende de tu aplicación. forzar el recálculo sincrónico de los estilos, si se realiza con frecuencia, puede hacer que su UI tartamudee. Si esto ocurre, use el tiempo de espera de forma juiciosa para dividir/amortizar una animación compleja en unos pocos cuadros. – mmaclaurin

Gracias, esta es la primera explicación que he encontrado de * why * un setTimeout es efectivo para forzar transiciones de CSS. –

¡Guau! ¡Genial! Salvaste mi día. Perdió bastante tiempo para descubrir la razón, finalmente lo resolvió. ¡gracias de nuevo! –

Transiciones de CSS3 a elementos creados dinámicamente

Respuesta

Cuestiones relacionadas