jQuery 및/또는 CSS3 전환으로 백분율 기반 위치에 애니메이션 적용 (플러그인을 통해)

Question

탐색 할 때 슬라이드 인과 아웃 섹션이있는 페이지 레이아웃을 만들려고합니다. 각 섹션은 화면 (100 % 너비/높이)을 채우며 백분율 기준 값으로 절대적으로 배치됩니다. 다음과 같이 첨부 된 샘플

, 위치 된 네 개의 섹션이있다 :

0 100 %, [C] 100 % 인 [A] 0 0이고

 
[a] 
[b][c][d] 

는, [B]는 100 %이고 [d]는 200 % 100 %이다.

내비게이션을 수행하기 위해 모든 섹션을 100 % 100 % 절대 배치 된 오버 플로우 숨겨진 컨테이너에 배치했습니다. 섹션을 탐색 할 때 컨테이너의 '상단'및 '좌측'값은 섹션 오프셋의 음수로 애니메이션됩니다. [d]를 선택하면 컨테이너가 -200 % -100 %로 애니메이션됩니다.

이상한 행동이 풍부합니다! 0 % 오프셋으로 이동 (왼쪽으로 또는 위로 이동) 할 때 전환이 정상적으로 작동합니다. 그러나 다른 조합 (즉, 음수 오프셋)은 외관상으로는 비논리적 인 (그러나 일관된) 단점을 초래합니다.

자신에 대한 참조 : http://www.doronassayas.com/ypsite

다음은 요약이다 :

• [C] 및 [D]에 중 [A] 또는 [B] 잘 작동합니다.
• [a]에서 [b]와 [a]에서 [d]까지 : 점프하여 처음으로 점프하고 애니메이션을 시작합니다.
• [a]와 [b]에서 [c]가 가장 이상합니다. 전환이 시작되기 전에 본체 (또는 다른 상위 요소가?)이 CSS를 통해 추적 할 수없는 시각적 오프셋으로 나옵니다 (보이지 않음 Firebug 및 기타 개발 도구에서). 그래서 CSS 값이 우리가 [c]에 있어야한다고 분명히 보여 주더라도 [c]에서 끝나지 않고 [시각적으로] [d]에 끝납니다. Firebug 계층에서 클릭하는 것과 같은 임의의 작업을 수행하면보기가 올바른 위치로 재설정됩니다. WTF?

파이어 폭스 4, 크롬 10 사파리 5에서이를 테스트와 같은 문제는 단순히 함께 용기에 -prefix 전이 적용 jQuery.animate() 또는 Louis Remi's very cool jQuery.transition plugin를 사용할지 여부, 모든 브라우저에서 발생 animate()가 불려 갔을 때의 새로운 오프셋 (offset) 치

낯설음의 일관성은 저를 흥미 롭습니다. 어떤 아이디어?

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

Answer 1

상당한 머리카락을 잡아 당긴 후 나는 바디 요소에 자동으로 오버플로를 켜서 버그가있는 행동을 진단했습니다. 음의 값으로 포지셔닝 효과를 발생시키는 것은 몸체의 계산 된 너비와 높이에 혼란을 가져 오며, 전환 중에도 계속 변합니다 (실제로는 예상되는 동작 인 100 %의 창에 실제로 머 무르지 않습니다). 브라우저간에 놀라 울 정도로 일관성이 있지만 결과는 변동하는 스크롤 막대 및 본문 요소의 잘못된 스크롤 위치입니다.

솔루션

은 매우 간단 밝혀졌다 :

body 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding: 0; 
    margin: 0; 
} 

내가 전에 사용되지 않는 고정 된 위치는, 그것의 내용에 대한 변경 사항을 무시하고 신체 요소는 고정 된 크기와 위치를 유지합니다. 그리고 당신은 그것을 가지고 있습니다!JQuery와 Louis Remi 덕분에 어디에서 하드웨어 가속이 가능했는지 알 수 있습니다.