Карусель - положение элемента изменяется визуально при касании - PullRequest
Новая
       11

Карусель - положение элемента изменяется визуально при касании

1 голос
/ 15 февраля 2011

Я пытаюсь создать сенсорную карусель для мобильного сафари.Пока все хорошо, но я сталкиваюсь с проблемой, когда пытаюсь установить левое положение элементов после того, как они были пролистаны.Левые позиции корректно устанавливаются в CSS, но отображаются некорректно.

Извините, если это не ясно, но это немного сложно описать.

Пожалуйста, посмотрите на проблемуздесь (пожалуйста, просмотрите на вашем устройстве iOS или Android).

Для воспроизведения

  • Коснитесь элемента 3

  • Проведите пальцем влево, достаточно, чтобы элемент 1 был за пределами экрана (не отрывайте палец от экрана. Вы должны увидеть элемент 2, элемент 3, элемент 4, элемент 5 и некоторые элементы из пункта 6.

  • Поднимите палец с экрана (вы увидите, что предметы «прыгают». Пункт 3 теперь там, где был пункт 2, Элемент 4, где был элемент 3 и т. Д.)

  • Теперь попробуйте снова провести пальцем влево. Предметы снова «прыгнут». Элемент 2 вернулся туда, где и должен был быть.

По сути, чтоЯ перевожу элементы на основе пройденного расстояния. На сенсорном конце я устанавливаю позиции элементов в переведенные позиции.Он ломается.

Весь мой код указан в приведенном выше URL.

Любая помощь будет принята с благодарностью.

Спасибо!

1 Ответ

0 голосов
/ 15 февраля 2011

Понял!

Итак, моя проблема не состояла в сбросе преобразования.Я добавил эту строку: 

items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";

в мою функцию updatePosition и все хорошо! 

  function updatePosition(){
    for(var i=0; i<items.length; i++){
      var translatedLeft = getTranslatedPosition(items[i]).left;
      items[i].style.left = translatedLeft + "px";
      items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";
    }
  }

рабочая демонстрация здесь: http://dl.dropbox.com/u/10250170/dev/carousel/touch_test.html (просмотр в симуляторе iPhone или iOSили устройство Android)

...