CSS3转换为动态创建的元素
CSS3转换为动态创建的元素
提问于 2010-10-19 23:08:16
我正在尝试使用CSS3 transitions对动态创建的html元素进行动画。
我希望动画在创建元素之前开始。
为此，我创建了一个类来设置元素的原始位置，然后通过jquery css()方法设置目标位置
但新元素只是接近目标位置，没有任何过渡。
如果我使用0ms的setTimeout来设置新的CSS值，它就会起作用。
是不是我做错了什么？或者是一种限制？我不认为我应该使用setTimeout变通方法。
谢谢!
更新：这里有一个在jsfiddle.net上运行的代码的链接，供您试用。http://jsfiddle.net/blackjid/s9zSH/
UPDATE我已经用答案中的解决方案更新了示例。
下面是一个完整工作的示例代码
<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>回答 1
Stack Overflow用户
回答已采纳
发布于 2011-08-03 04:38:28
您不需要使用超时。超时之所以起作用，是因为页面会在设置样式之间回流。回流会重新计算styles.If您不会重新计算样式，第二个样式只是覆盖第一个样式。这才是真正的问题。
相反，您可以简单地：
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中测试
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3969817
复制相关文章
相似问题
腾讯云开发者
