CSS3过渡到动态创建的元素

我正在尝试使用CSS3过渡 动画创建动态创建的html元素。

我希望动画在元素创建之前启动。
对于这些我创建一个类来设置元素的原始位置，然后我通过jquery css（）方法设置目标位置

但它刚刚在目标位置上出现的新元素没有任何过渡。

如果我使用0ms的setTimeout来设置它的新css值。

有什么我做错了吗？ 或者是一种限制？ 我认为我不应该使用setTimeout解决方法。

谢谢！

更新 ：这是与jsfiddle.net上运行的代码的链接，供您进行实验。 http://jsfiddle.net/blackjid/s9zSH/

更新我已经用答案中的解决方案更新了示例。
http://jsfiddle.net/s9zSH/52/

这是一个完整的示例代码

    //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"); });   .animate{ -webkit-transition: all 1s ease-in; } .square{ width:50px; height:50px; background:red; position:relative; left:5px; }    
 
 
 duplicate with setTimeout duplicate without setTimeout   

Answer 1

您不需要使用超时。 超时有效，因为页面在设置样式之间重排。 Reflowing重新计算样式。如果不重新计算样式，则第二种样式只会覆盖第一种样式。 这才是真正的问题。

相反，你可以简单地说：

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

如果您要为多个对象设置动画，则只需要“抽”一次样式计算器：

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

在Mac上测试chrome12