WebKit CSS转换和Javascript中的动画

我正在研究iPhone Web应用程序。我只是在玩webkit-transform和webkit-animation CSS规则。我有一些问题：例如，使用它们而不是jQuery.animate（...）有真正的优势吗？由此产生的动画似乎并没有那么快速。让我们更好地解释：我的一系列图像我要在屏幕上移动，就像一个画廊......我设置每个图像的CSS规则是这样的：WebKit CSS转换和Javascript中的动画

-webkit-transition-property: left, top, right, bottom, width; 
-webkit-transition-duration: 200ms;

然后我改变style.left和风格。我想用新的坐标移动每个元素的顶部。结果并没有我想象的那么快。它跟jQuery差不多（不流畅）。我见过甚至有-webkit-animation和-webkit-transform，但我仍然不明白如何正确使用它们。第一个让我走动的东西，但不会生成动画，我用下面的代码：

var trans = "translate(" + x + "px," + y + "px)"; 
ELEMENT.style.webkitTransform = trans;

与此元素四处移动，但没有动画。如果我动态创建与动画：

var lastSheet = document.styleSheets[document.styleSheets.length - 1]; 
lastSheet.insertRule("@-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length); 
ELEMENT.style.webkitAnimationName = "animX";

这样的元素将移动一次，没有那么fludly，并不失为回到它的老位置。重复此代码不会导致任何结果。

您认为，在运用流动性方面有真正的优势吗？如果是，如何正确使用它们？

来源

2010-07-23 gotch4

这样的事情应该做你想做的，而且相当平稳运行的Safari在我的iPhone 4：

<style type='text/css'> 

    #element { 

     position: absolute; 
     top: 0px; 
     left: 0px; 
     -webkit-transition-property: top, left, bottom, right; 
     -webkit-transition-duration: 300ms; 
     -webkit-transition-timing-function: ease-in; 

    } 

</style> 

<script type='text/javascript'> 

    document.querySelector('#element').style.left = '300px'; 

</script>

来源

2011-02-04 18:10:44

WebKit CSS转换和Javascript中的动画

回答

相关问题