CSS3转换为动态创建的元素 [英] CSS3 transitions to dynamically created elements
问题描述
我想使用 CSS3转换 动态创建一个动态创建的html元素。
I'm trying to animate a dynamically created html element with CSS3 transitions.
我想让动画在元素创建之前开始。
对于这些，我创建一个类来设置元素的原始位置，然后我通过jquery css（）方法设置目标位置
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.
如果我使用一个setTimeout的0ms来设置新的CSS值，它工作。
If I use a setTimeout of 0ms to set the new css value it work.
'做错了？或者是一个限制？
我不认为我需要使用setTimeout解决方法。
There is something I'm doing wrong? or is a limitation? I don't think I should need to use the setTimeout workaround.
谢谢！
UPDATE ：以下是一个链接，其中包含在jsfiddle.net上运行的代码，供您进行实验。
http://jsfiddle.net/blackjid/s9zSH/
UPDATE: Here is a link with the code running on jsfiddle.net for you to experiment. http://jsfiddle.net/blackjid/s9zSH/
UPDATE 我已用答案中的解决方案更新了示例。
http://jsfiddle.net/s9zSH/52/
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>
推荐答案
您不需要使用超时。超时工作，因为页面在设置样式之间回流。回流重新计算样式。如果不重新计算样式，第二个样式将会覆盖第一个样式。这是真正的问题。
You don't need to use a timeout. Timeout works because the page is reflowed between setting styles. Reflowing recalculates the styles.If you don't recalculate the styles, the second style simply overwrites the first. That's the real issue.
相反，您可以简单：
obj.className = style1;
window.getComputedStyle(obj).getPropertyValue("top");
obj.className = style2;
如果你要动画多个对象，你只需要 / p>
If you're animating multiple objects, you only need to "pump" the style calculator once:
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上测试
Tested in chrome12 on mac
这篇关于CSS3转换为动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
