I'm trying to animate a dynamically created html element with CSS3 transitions.
I want the animation to start just before the element is created.
For these i create a class that set the original position of the element and then I set the target position by the jquery css() method
But the new element it just apears in the target position without any transition.
If I use a setTimeout of 0ms to set the new css value it work.
There is something I'm doing wrong? or is a limitation? I don't think I should need to use the setTimeout workaround.
Thanks!
UPDATE: Here is a link with the code running on jsfiddle.net for you to experiment. http://jsfiddle.net/blackjid/s9zSH/
UPDATE I've updated the example with the solution in the answer.
http://jsfiddle.net/s9zSH/52/
Here is a fully working example code
<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>
