jquery - paginas - Transiciones CSS3 a elementos creados dinámicamente
jquery html append (1)
Estoy tratando de animar un elemento html creado dinámicamente con transiciones CSS3 .
Quiero que la animación comience justo antes de que se cree el elemento.
Para estos creo una clase que establece la posición original del elemento y luego establezco la posición de destino por el método jquery css ()
Pero el nuevo elemento simplemente aparece en la posición de destino sin ninguna transición.
Si uso un setTimeout de 0ms para establecer el nuevo valor de css, funcionará.
Hay algo que estoy haciendo mal? ¿O es una limitación? No creo que deba usar la solución temporal setTimeout.
¡Gracias!
ACTUALIZACIÓN : Aquí hay un enlace con el código que se ejecuta en jsfiddle.net para que usted experimente. http://jsfiddle.net/blackjid/s9zSH/
ACTUALIZACIÓN He actualizado el ejemplo con la solución en la respuesta.
http://jsfiddle.net/s9zSH/52/
Aquí hay un código de ejemplo completamente funcional.
<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>
No es necesario utilizar un tiempo de espera. El tiempo de espera funciona porque la página se refleja entre los estilos de configuración. El reflujo vuelve a calcular los estilos. Si no vuelve a calcular 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 está animando varios objetos, solo necesita "bombear" la calculadora de estilo 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