회전 장치 - 요소 위치가 시각적으로 바뀝니다

Question

모바일 사파리에 터치/스 와이프 회전식 컨베이어를 만들려고합니다. 지금까지는 좋았지 만 요소를 스 와이프 한 후에 요소의 왼쪽 위치를 설정하려고 할 때 문제가 발생했습니다. CSS에서 왼쪽 위치가 올바르게 설정되었지만 잘못 표시됩니다.

죄송 합니다만 명확하지는 않지만 설명하기가 어렵습니다.

Please see the problem here (please view on your iOS or Android device).

재현하는 ,

• 터치 항목 3

• 출근 왼쪽에, 충분히 그 항목 1이 화면 밖으로 그래서 (오프 손가락을 들지 마십시오 화면에서 항목 2, 항목 3, 항목 4, 항목 5 및 항목 6 중 일부가 표시되어야합니다.

• scre에서 손가락을 들어 올리십시오. en (아이템 "jump"가 보일 것입니다. 항목 3은 항목 2, 항목 3은 항목 4 등)

• 이제 다시 왼쪽으로 스 와이프하려고합니다. 항목을 다시 "점프"합니다. 항목 2는 원래 예정된 곳으로 되돌아갑니다.

기본적으로 스 와이프 한 거리를 기준으로 항목을 변환합니다. 터치 끝에서 요소의 위치를 ​​번역 된 위치로 설정합니다. 그것은 그것이 깨고있는 곳입니다.

내 모든 코드는 위의 URL에 있습니다.

도움을 주시면 감사하겠습니다.

감사합니다!

Answer 1

알 수 있습니다.

그래서 내 문제는 변환을 재설정하지 못했습니다. 이 줄을 추가했습니다 :

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

내 업데이트 위치 기능에 모두 좋았습니다. 여기

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 (아이폰 시뮬레이터 또는 iOS 또는 안드로이드 장치보기)