bla*_*jid 20 css jquery css3 transitions
我正在尝试使用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>
mma*_*rin 18
您不需要使用超时.超时有效,因为页面在设置样式之间重排.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