我试图用CSS3转换动画创建一个html元素。
我想让动画在元素创建之前开始。
对于这些我创建一个类设置元素的原始位置,然后我通过jquery css()方法设置目标位置
但是新的元素在目标位置上就没有任何转变。
如果我使用0ms的setTimeout来设置新的css值,它将工作。
有什么我做错了吗?还是限制?
我不认为我应该使用setTimeout解决方法。
谢谢!
更新:这是一个与jsfiddle.net上运行代码的链接,供您进行实验。
http://jsfiddle.net/blackjid/s9zSH/
更新我在答案中更新了解决方案的示例。
http://jsfiddle.net/s9zSH/52/
这是一个完整的示例代码
<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>
解决方法
您不需要使用超时。超时工作原因是页面在设置样式之间回流。回流重新计算样式。如果您不重新计算样式,则第二个样式将简单地覆盖第一个样式。这是真正的问题。
相反,你可以简单地:
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;
测试在chrome12在mac