在iPhone OS 3.0中使用webkit-transform translate（）进行慢动画 [英] Slow animation with webkit-transform translate() in iPhone OS 3.0
问题描述
iPhone OS 3.0中的JavaScript处理有什么变化吗？此代码适用于Safari 4 Public Beta和iPod Touch 2.0，但不适用于iPhone OS 3.0的iPod touch。目的是在2秒内将盒子向右移动一点，但在3.0中它只是跳转到新位置而没有动画或延迟。
Has something changed in JavaScript handling in iPhone OS 3.0? This code works in Safari 4 Public Beta and in iPod Touch 2.0, but not in iPod touch with iPhone OS 3.0. The purpose is to move the box a little to the right in 2 seconds, but in 3.0 it just jumps to the new location without animation or delay.
<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作为过渡属性来解决这个问题，但这给了我其他类型的问题当我试图将它集成到我的项目中时（基本上我需要结合拖动动画和动画运动，拖动使用翻译和动画左侧属性这是不好的。我不知道拖动是否可以使用left-property实现）。知道上面的代码可能有什么问题，或者这是iPhone OS 3.0以后的功能吗？
I can go around this by using left as the transition property, but that's giving me other kind of issues when I'm trying to integrate this to my project (basically I'd need to combine dragging movement and animated movement and the dragging uses translate and the animation left-property which isn't nice. I don't know if the dragging can be implemented using left-property). Any idea what might be wrong in the code above or is this a feature from iPhone OS 3.0 onwards?
推荐答案
只有translate3d（ ）和scale3d（）函数在移动游猎中加速硬件。
only the translate3d() and scale3d() functions are hardware accelerated on mobile safari.
这篇关于在iPhone OS 3.0中使用webkit-transform translate（）进行慢动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
