iphone - Javascript 中的 WebKit CSS 转换和动画

Question

我正在开发 iPhone Web 应用程序。我刚刚开始使用 webkit-transform 和 webkit-animation CSS 规则。我有一些问题:例如，使用这些而不是 jQuery.animate(...) 是否有真正的优势？由此产生的动画似乎并没有那么加速和快速。让我们更好地解释一下:我有一系列图像必须在屏幕上移动，就像画廊一样......我将每个图像的 CSS 规则设置如下:

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

然后我更改要使用新坐标移动的每个元素的 style.left 和 style.top 。结果并没有我想象的那么快。它或多或少像 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";

这样元素就会移动一次，不会那么流畅，然后就会回到原来的位置。重复此代码不会产生任何结果。

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

Answer 1

这样的东西应该可以满足你的要求，并且在我的 iPhone 4 上的 Safari 中运行得非常流畅:

<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>