Медленная анимация с помощью webkit-transform translate () в iPhone OS 3.0 - PullRequest
Новая
       26

Медленная анимация с помощью webkit-transform translate () в iPhone OS 3.0

6 голосов
/ 09 июля 2009

Что-то изменилось в обработке JavaScript в iPhone OS 3.0? Этот код работает в общедоступной бета-версии Safari 4 и в iPod Touch 2.0, но не в iPod touch с iPhone OS 3.0. Цель состоит в том, чтобы переместить коробку немного вправо за 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 и левое свойство анимации, что не очень хорошо. Я не знаю, можно ли перетащить, используя левое свойство). Любая идея, что может быть не так в коде выше или это функция iPhone OS 3.0 и более поздних версий?

Ответы [ 2 ]

4 голосов
/ 20 октября 2010

только функции translate3d () и scale3d () аппаратно ускоряются в мобильном сафари.

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

1 голос
/ 10 июля 2009

Неважно, по-видимому, было проще всего преобразовать функцию перетаскивания, чтобы также использовать свойство left.

...