HTML5/CSS3 데모에서 저는 주로 성능 향상을 위해 CSS 전환을 사용합니다.CSS3 성능? 왼쪽 애니메이션 또는 왼쪽으로 움직이기 X
내 UI가 궁금 해서요. 예를 들어 현재 JQuery가 마우스 위치를 기반으로 한 컨테이너 Div의 왼쪽 속성을 조작하는 대신 대신 transform: translateX(tx)을 사용해야합니까? 또는 JQuery가 브라우저에서 지원하는 경우 자동으로이 작업을 수행합니까?
jquery는 transform : translateX (tx)를 대신 사용하지 않습니다. 당신은 그것을 수동으로해야합니다. 그러나 실제로는 훨씬 더 빠르기 때문에이 작업을 수행하는 것이 좋습니다.
당신은 결과에 따라 무엇을 결정하는 다음 기능 감지 Mondernizr을 사용할 수 있습니다. http://jsfiddle.net/zWavD/1/
JQuery와 애니메이션은 두 번째
오히려 JQuery와 애니메이션보다 번역을 사용하는 유일한 이유는 경우입니다 (내 지식의 최선을) 재산 목록을 추측하려고하지 않습니다, 당신이 그것을 손 속성을 애니메이션 iPad 및 iPhone에서 최상의 성능을 고려하십시오. CSS 변환은 이러한 기기에서 GPU 오프로드되며 translate3d는 translate2d가 아니며 Android와 같은 다른 휴대 기기와 Chrome, Safari와 같은 데스크톱 브라우저에 곧 추가됩니다.
멋진 나는이 크게 모바일 기기에 도움이 될 것입니다 잊어 버렸습니다. – davivid
는 CSS3를 사용하여 특정 속성을 애니메이션 jQuery를 강화 벤 바넷 (왼쪽 그들 중 하나)에 의한 JQuery와 확장 있습니다 : 여기
을 보여줍니다 데모
.
오, 그렇다면 마우스를 위치시킬 때'$ ("div") .css ("- webkit-transform", "translate (45px, 0)")를 사용하고 애니메이션을 원한다면 CSS에 전환을 추가하십시오. – davivid
아니요 CSS 만 사용하고 JS는 호환되지 않는 브라우저의 대체 브라우저로 사용하십시오. 당신이 원하는 것을 말해 준다면 데모를 만들 수 있습니다 – meo
나는 내 뜻을 보여주기 위해 내 글을 편집했습니다. – meo