小编erk*_*ene的帖子

作为一个实验,我试图在不使用canvas对象的情况下在JavaScript中复制AS3的Sprite功能.我认为使用绝对定位的div并操纵他们的css属性将毫无疑问,但是在Chrome中,动画引入了奇怪的工件(似乎是因为重绘问题).

我找不到我做错了什么？事实上,代码非常简单.以下是我尝试的一些没有帮助的要点:

• 使用相对定位的div(而不是绝对定位的.)
• 使用边距(与顶部和左侧属性相对).
• 将对象直接附加到正文(而不是附加到容器div).
• 使用setTimeout(而不是requestAnimationFrame)

你可以在这里看到一个简化的小提琴:http://jsfiddle.net/BVJYJ/2/

编辑:http://jsfiddle.net/BVJYJ/4/

在这里,您可以在我的浏览器上看到工件:

这可能是我的设置中的错误(Windows 7 64位,Chrome 21.0.1180.75).没有其他浏览器出现此行为.如果有人可以评论我可能做错了什么,我将不胜感激.我对这背后的原因更加好奇,而不是一个解决方法.也就是说,欢迎每一个解释.:)

编辑:示例代码中有一个错误导致使用setTimeout,即使我的印象是使用了RAF.requestAnimationFrame解决了基本转换的问题,但问题仍然存在于CSS转换(如旋转).