jQuery 애니메이션을 사용하여 CSS3 전환/변환으로 변환 할 수 있습니까?

Question

좋아요, 여기 애니메이션의 데모입니다 (헤더의 단어 HIPSTERS 클릭) : http://jacksongariety.com/

아주 간단합니다. 100 % 차원에서 75 % 차원으로 변경되고 0 개의 불투명도에서 1 개의 불투명도로 변경됩니다. 그런 다음 X를 치면 되돌릴 수 있습니다. jQuery가 애니메이션을 적용하는 자바 스크립트 setInterval로 인한 성능 문제가 있습니다. 몇 가지 조정을 시도했는데 CSS3를 사용해야하는 것처럼 보입니다. CSS3를 사용하면 코드가 더 복잡해지기를 원하지 않습니다. 그래서

, 나는이 jQuery를 애니메이션으로 변환 할 수있는 방법 :

.animate({ 
     opacity: 0, 
     width: '100%', 
     height: '100%', 
     left: '-50%', 
     top: '-50%' 
}, { 
     duration: 200, 
specialEasing: { 
     opacity: 'linear', 
     width: 'linear', 
     height: 'linear', 
     marginLeft: 'linear', 
     marginTop: 'linear' 
} 

... CSS3 전환/변환로를? 그런 다음 나이가 많은 브라우저에서 느린 jQuery 애니메이션으로 대체 할 수 있습니까?

미리 감사드립니다.

Answer 1

우선 무엇을하고 싶은지 전환 만하면됩니다. 애니메이션은 광범위하게 지원되지 않으며 jQuery의 animate()로 수행하는 작업은 전환으로 수행 할 수 있습니다 (탄성 또는 바운스 전환과 같은 특정 유형의 전환은 제외).

나는 내 CSS에 전환을 추가 한 다음 modernizr을 사용하여 자바 스크립트에서 기능을 감지합니다. 내 CSS (이것은 당신이하려고하는 정확히 무엇하지만, 예를 들어)과 같을 수 있습니다 예를 들어

: 지금 그래서

#lightbox { 
    opacity: 0; 
    width: 100%; 
    height: 100%; 
    left: -50%; 
    top: -50%; 

    -ms-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
    transition: all 0.2s linear; 

    -webkit-transform: translateZ(0); 
} 

#lightbox.active { 
    left: 0; 
    top: 0; 
    opacity: 1; 
} 

기본 숨겨진 상태가 addClass를 사용하여 켜거나 끌받을 수 있습니다 ("유효한"). CSS3 전환을 지원하는 브라우저에서 이제이 문제가 발생합니다! CSS3 전환을 지원하지 않는 브라우저의 경우 라이트 박스의 ID가있는 요소는 애니메이션없이 표시되거나 사라집니다. 또한 webkit translateZ 속성을 추가했습니다. Safari 및 Chrome에서 CSS3 전환시 GPU 가속을 얻는 트릭입니다. 특히 iOS 기기에서 성능면에서 큰 차이가 있습니다.

OK - 이제 어떻게 CSS3 전환을 지원하지 않는 브라우저에서 jquery.animate로 대체 할 수 있습니까? 이것은 현대인이 활동하는 곳입니다. 사용자가 닫기 버튼을 클릭하고 라이트 박스가 사라지 길 원한다고 가정 해 봅시다. 당신은 CSS3 전환과 브라우저의 "활성"클래스를 제거 또는 전환을 지원하지 않는 브라우저에 대한 jquery.animate 방법을 사용합니다 : http://www.modernizr.com/docs/#csstransitions