CSS에서 폰트 전환이 렌더링되지 않습니다.

Question

phonegap에서 CSS 전환 작업에 문제가 있습니다. 변환을 전환 중입니다. translate3d 속성을 사용하면 콘텐츠보기를 슬라이드보기 및 슬라이드보기로 슬라이드 할 수있을뿐만 아니라 슬라이딩하여 사이드 바를 표시 할 수 있습니다. 당신은 전환은 전화 및 데스크톱에 모두 브라우저에서 완벽하게 작동 것을 볼 수 http://ferriesapp.ca/app/

:

다음은 웹 애플리케이션 (천이 브라우저에서 작동 주)의 예입니다. 그러나 "phonegap"하자마자 전환이 렌더링되지 않습니다. 최종 위치가 표시됩니다. 예를 들어 출발 목록 항목을 누르면 해당 도착 목록 항목이 표시됩니다. 그러나 어떤 이유로 애니메이션은 전화 간격에서 발생하지 않습니다. 유일한 예외는 phonegap을 통과 할 때 iOS7에서 작동하지만 iOS 6 또는 Android 버전이 아닙니다.

.animate { 
    transition: transform 0.2s ease-out; 
    transition: -webkit-transform 0.2s ease-out; 
    transition: -moz-transform 0.2s ease-out; 
    transition: -ms-transform 0.2s ease-out; 
    transition: -o-transform 0.2s ease-out; 
} 

그리고 마지막으로 JS :

여기

여기

#depart-content { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
} 

애니메이션 클래스처럼 슬라이딩 요소의 CSS는 모습입니다 : 여기

는 간단한 코드입니다 이 함수는 함수를 호출합니다 (이 함수는 전체 함수가 아닙니다).

$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"}); 

아무도 제안이 없다면 대단히 감사하겠습니다.

고마워요!

P. 나는 CSS3의 @keyframes 규칙이 꽤 잘 작동한다는 것을 알고있다. 그러나 코드의 단순성을 위해 차라리 피해야한다.

Answer 1

iOS7에서 작동하지만 iOS6에서는 작동하지 않는다는 진술은 이것이 translate3d 문에

난 당신이 하드웨어 가속을 사용하려면이 라인에 넣어 가정입니다 -

transform: translate3d(0,0,0); 

그러나이 아이폰 OS 6 디바이스에서 트리거 하드웨어 가속을 가리키고하지 않습니다 reports 여러 가지가 있습니다.

내가 인용 한 기사에서 저자는 다음 명령 중 하나를 사용하면 하드웨어 가속이 트리거됨을 언급합니다.

-webkit-transform: translateZ(0); 
-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden;