CSS 전환 : 왼쪽 가장자리를 변환하는 동안 div의 오른쪽 가장자리 위치 수정

Question

CSS3 전환을 사용하여 DIV에 애니메이션을 적용하려고합니다. 예제 DIV는 :

HTML :

<div class="element"></div> 

CSS :

.element { 
    -webkit-transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 2s linear, width 2s linear; 
    position: absolute; 
    left: 100px; top: 100px; 
    height: 10px; width: 50px; 
    background-color: black; 
} 

이것은 DIV가 (100 픽셀, 100 픽셀)에서 용기 내의 영역을 점유하는 수단 (150 픽셀, 110px) - 오른쪽 가장자리는 150 픽셀로 고정됩니다.

나는 화면 오프 왼쪽 가장자리를 번역하는 동안 150 픽셀에서 정적 오른쪽 가장자리를 유지하는 DIV 싶습니다, 그래서 그렇게 같은 DIV로 전환 클래스 (자바 스크립트를 통해) 적용했습니다

:

CSS :

.transition { 
    -webkit-transform: translate3d(-200px, 0, 0); 
    width: 150px; 
} 

제가 보는 문제는 너비의 전환, 그래서 대신에 크기와 왼쪽 위치에 균일하게 증가, 번역 DIV의 왼쪽 가장자리와 오른쪽 가장자리를 주기적으로 업데이트하지 않는다는 것입니다 DIV가 다른 속도로 벗어나면서 위치가 약간 변하고 약간 깜박입니다 (플랫폼에 따라 깜박임).

이 문제는 Chrome이 아닌 Mobile Safari (iPhone의 Phonegap 웹보기가 주요 개발 플랫폼)에서 생생하게 발생합니다.

저는 (아이폰에서 발생하는 것을보기 위해) 데모 한 http://jsfiddle.net/XwuBz/에 JSFiddle을 넣었습니다.

이 최종 결과를 얻는 다른 방법이 있습니까? 사전에

감사합니다,

댄

Answer 1

글쎄, 그것은 아이폰 OS 사파리 전환과 함께 몇 가지 이상한 문제가 보인다/변환.

는 난 단지 jQuery로 동일한 결과를 달성하기 위해 노력하고, 아이폰 4S, iOS6의에 근무 :

여기

$('.element').animate({left:'-=200','width':'+=200'},2000); 

가 demo입니다.