gpt4 book ai didi

javascript - iPhone OS 3.0 中使用 webkit-transform translate() 的慢速动画

转载 作者:数据小太阳 更新时间:2023-10-29 05:24:15 25 4
gpt4 key购买 nike

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 作为过渡属性来解决这个问题,但是当我试图将它集成到我的项目中时,这给了我其他类型的问题(基本上我需要结合拖动运动和动画运动以及dragging用到了translate和动画left-property,不太好用,不知道拖动能不能用left-property实现)。知道上面的代码可能有什么问题吗?或者这是 iPhone OS 3.0 以后的功能?

最佳答案

只有 translate3d() 和 scale3d() 函数在移动 safari 上是硬件加速的。

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

关于javascript - iPhone OS 3.0 中使用 webkit-transform translate() 的慢速动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1103129/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com