iPhone OS 3.0 中带有 webkit-transform translate() 的慢动画答案

【问题标题】：Slow animation with webkit-transform translate() in iPhone OS 3.0iPhone OS 3.0 中带有 webkit-transform translate() 的慢动画
【发布时间】：2009-07-09 10:40:30
【问题描述】：

iPhone OS 3.0 中的 JavaScript 处理有什么变化吗？此代码适用于 Safari 4 Public Beta 和 iPod Touch 2.0，但不适用于带有 iPhone OS 3.0 的 iPod touch。目的是在 2 秒内将框向右移动一点，但在 3.0 中它只是跳转到新位置，没有动画或延迟。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>iPhone JS testing</title>
<style type="text/css">
.box{
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: red;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 2.0s;
}
.move{
  -webkit-transform: translateX(100px);
}
</style>
<script src="jquery-1.3.2.min.js" type="application/x-javascript"></script>
</head>
<body>
<script type="text/javascript">
  $(function () {
    $(".box").click(function(){
    $(this).addClass("move");
  });
  });
</script>
<div class="box"></div>
</body>
</html>

我可以通过使用 left 作为过渡属性来解决这个问题，但是当我尝试将它集成到我的项目中时，这给了我其他类型的问题（基本上我需要结合拖动运动和动画运动以及拖拽用了translate和动画left-property，效果不好。不知道拖拽能不能用left-property实现）。知道上面的代码可能有什么问题，或者这是 iPhone OS 3.0 以后的功能吗？

【问题讨论】：

标签： javascript webkit iphone transitions

【解决方案1】：

只有 translate3d() 和 scale3d() 函数在移动 safari 上进行了硬件加速。

http://www.mobigeni.com/2010/09/22/how-to-use-hardware-accelerated-css3-3d-transitions-on-ipad-and-iphone/

【讨论】：

【解决方案2】：

没关系，显然将拖动功能转换为也使用 left 属性是最简单的。

【讨论】：