iPhone OS 3.0中使用webkit-transform translate()时动画缓慢

6

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属性实现拖动。您有什么想法,上面的代码有什么问题,或者这是iPhone OS 3.0以后的功能?

2个回答

4

1

算了,显然最简单的方法是将拖动功能转换为使用left属性。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接