iPhone에서 높이 (및 다른 치수)를 부드럽게 변환하려면 어떻게해야합니까?

Question

화면 하단에서 슬라이드하고 뷰포트를 덮는 간단한 슬라이드 패널을 만들려고합니다. 그런 다음 AJAX를 통해 해당 패널에 컨텐츠를로드합니다.

패널 요소를 height : 0으로 설정하고 뷰포트 하단에 절대 배치하고 css3 전환을 적용한 상태에서 높이를 뷰포트의 높이로 설정하여 애니메이션을 트리거합니다.

불행히도 애니메이션은 실제로 느리고 느려서 받아 들일 수없는 부분까지 있습니다.

나는 패널에 다음 CSS를 적용하고 있습니다 :

는

-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease-in-out; 
-webkit-transition-property: height; 

컨텐츠의 양에는 영향을 갖고있는 것 같아요. 아니면 콘텐츠 유형입니까? 나는 잘 모르겠다. 나는 AJAX가 가지고 있다고 생각하지 않는다. 내가 틀릴 수도 있지만 문제를 일으킨다.

아이디어가 있으십니까?

건배.

Answer 1

느린 것은 브라우저가 새로운 높이에 맞추기 위해 텍스트를 다시 랩해야한다는 사실과 관련이 있습니다. 높이가 아니라 위치를 움직이거나 번역하십시오. 여기

빠른 프로토 타입입니다 : http://jsfiddle.net/6gdGr/

당신은, 당신은 -webkit-translate3d를 사용하여 하나 (1) 배치의이면에는의 숨겨진 가시성 또는 2를 포함 쉽게 유래에서 답을 찾을 것 깜빡 슬라이드 문제가 발생할 수 있습니다 문맥에 따라 다르다.